Passing a state to another component so I can render a list?

Question

I am trying to render a list, I am doing my central component in a Class, and with a form and some inputs I want to setState of the class so I can use those values to render a list element, nevertheless it is not working, I can't even log the state's properties after the click, how can I manage to use those values on the inputs to render list elements? Should I use hooks instead?

class TASKMANAGER extends Component {
    constructor(props){
        super(props);
        this.state= {
            name: "",
            description:"",
            priority: "urgent",
        }
        
    
    }

     
    

    handleTitleChange = event => {
        this.setState( {
            name: event.target.value
        })
        };

    handleDescriptionChange = event => {
        this.setState({
            description: event.target.value
        })
        };

    handlePriorityChange = event => {
        this.setState({
            priority: event.target.value
        })
        };
        
    
    handleClick() {
            console.log(this.state);
        }
            

    

    render() {

        return (
            <div>
             <div className= 'task-form'>  
            <form>
                <div>
                    <label>Name your task!</label>
                    <input type= 'text' id='task-title' value={this.state.name} onChange={this.handleTitleChange} />
                </div>
                <div>
                    <label>Description?</label>
                    <textarea id='description' value={this.state.description} onChange={this.handleDescriptionChange}/>
                </div>
                <div>
                    <label>Priority?</label>
                    <select value={this.state.priority} onChange={this.handlePriorityChange}>
                        <option value='urgent'>Urgent</option>
                        <option value='regular'>Regular</option>
                        <option value='Can wait'>Can wait</option>
                    </select>    
                </div>
                <button onClick={this.handleClick}>PRESS</button>
            </form> 
            </div>
            <div className='list-items'>
                <ul>
                
                </ul>
            </div>
            </div>   
            )
    }}

Answer 1

Your [PRESS] button will trigger a form submit event, which will refresh the page by default.
👉 Your log code will be never seen.

Your codes are almost ok.
Just add preventDefault() in the handleClick() function.

    handleClick = (event) => {
        event.preventDefault();
        console.log(this.state);
    }