How to re-render a list after deleting an element

Question

I am trying to write a delete method in order to delete an element from a list, first of all I am not being able to write it in a setState function so I have it as a direct function call, How can I manage to signal a re-render after the direct function or manage to place the function in the setState method for automatic re-render?

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

        this.handleTitleChange= this.handleTitleChange.bind(this);
        //this.handleDescriptionChange= this.handleDescriptionChange.bind(this);
        //this.handlePriorityChange= this.handleDescriptionChange.bind(this);
        this.handleClick= this.handleClick.bind(this);
        

    }

     

    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 = event => { 
        this.setState((state) => {
        const tasklist = [
          ...state.tasklist,
          [
            state.name,
            state.description,
            state.priority
          ]
        ];
        return {
          tasklist
        };
       });
        
            
            //console.log(this.state.tasklist);
        };

        handleDelete = index => {
            this.setState(() => {
                this.state.tasklist.splice(index, 1)
            });

            console.log(this.state.tasklist)
        }    THIS ONE IS THE FUNCTION I CANNOT SET TO WORK TO TRIGGER THE AUTO RE-RENDER


       

    

    render() {
        
        const task_item = this.state.tasklist.map((arr, index) => (
                <li 
                key= {index}
                className= 'task'>
                Task: {arr[0]} <br />
                Description: {arr[1]} <br />
                Priority: {arr[2]} <br />
                <div className='delete-button' onClick={
                    /*() => {this.state.tasklist.splice(index, 1);}*/ THIS ONE IS THE DIRECT FUNCTION THAT WORKS, BUT DOESN'T TRIGGER THE RE-RENDER, IT SHOWS WHEN I TYPE AGAIN ON THE INPUTS 

                    this.handleDelete                 

            }>delete</div>
                </li>
                ))

        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>
            </form> 
            <button onClick={this.handleClick}>PRESS</button>
            </div>
            <div className='list-items'>
                <ul className='list-render'>
                    {task_item}
                </ul>
            </div>
            </div>   
            )
    }}


    export default TASKMANAGER

Answer 1

You shouldn't be making any mutations to the current state, but instead build a new state from the existing state, generating a new, filtered array along the way

handleDelete = index => {

    this.setState((state) => ({
        ...state,
        tasklist: state.taskList.filter((_,i) => i != index)
    }));
}

When you map your taskList to JSX below, you will need to avoid using the index of the item as key , because the optimizations react makes using the key value will be operating under broken assumptions. Use a key value that remains constant and unique per item. Perhaps its name, or an identifier that is attached to it when created.

Answer 2

There is no need to assign the list. Just splice it. Use something like this to change the state:

delete={()=>{this.setState({phase:1-this.state.phase});
                  this.state.list.splice(index,1)}}