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.