How to delete element onclick in Reactjs?

Question

I have made CARD's which display's username . When I click on the delete button ie cross or cancel button it should remove the CARD's from the tasklist here tasklist is state variable. I am using .map() method to iterate over each task and display it. I want to delete the task card of a particular user when I click on the red cross button (see screenshot) currently only the window appears saying -> are you sure you want to delete it if I click yes it should delete it.

Code:

import React, {Component} from "react"; 

export default class Tasks extends Component{
    constructor(props){
        super(props);
        this.state = {
            taskList:[],
            taskName:"",
            type:"classification",
            datasetName:"",
            allDatasets:[],
            users:[],
            names:[]
        }
    }

triggerDelete(task){
        if(window.confirm("Are you sure you want to delete this task?")){

        }
    }

render(){
        return(
            <div className="tasks-wrap">
                <h1 onClick={()=>{
                   this.props.history.push("/taskdetails");
                }}>Your Tasks</h1>
                {
                            this.state.taskList.map((task,index)=>{
                                return(
                                    <div key={index} className="item-card" onClick={()=>{
                                        window.sessionStorage.setItem("task",JSON.stringify(task));
                                        this.props.history.push("/taskdetails/");
                                    }}>
                                        <div className="name">{task.name}</div>
                                        <div className="sub">
                                            <div className="type">Dataset: {task.dateSetName}</div>
                                            <div className="members">{task.userList.length + " participants"}</div>
                                        </div>
                                        <div className="del-wrap" onClick={(e)=>{
                                            e.stopPropagation();
                                            e.preventDefault();
                                            this.triggerDelete(task);
                                        }}>
                                            <img src={require("../../images/cancel.svg")}/>
                                        </div>
                                    </div>
                                );
                            })
                        }
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}

How should I modify my triggerDelete() method? So that the particular card gets deleted.

Answer 1

Pass index of the deleting task to the triggerDelete function and then just remove that index from this.state.taskList array.

<div className="del-wrap" onClick={(e)=>{
      e.stopPropagation();
      e.preventDefault();
      this.triggerDelete(task, index);
   }}>
        <img src={require("../../images/cancel.svg")}/>
</div> 

And in triggerDelete function

triggerDelete(task, index){
   if(window.confirm("Are you sure you want to delete this task?")){
      let taskList = [...this.state.taskList]
      taskList.splice(index, 1);
      this.setState({taskList: taskList})
   }
}

Answer 2

you need to write the logic to delete the task, its easier to do it if you pass the index of the task to triggerDelete. window.confirm returns a boolean value indicating whether OK or Cancel was selected (true means OK).

import React, {Component} from "react"; 

export default class Tasks extends Component{
    constructor(props){
        super(props);
        this.state = {
            taskList:[],
            taskName:"",
            type:"classification",
            datasetName:"",
            allDatasets:[],
            users:[],
            names:[]
        }
    }

triggerDelete(index){
        if(window.confirm("Are you sure you want to delete this task?")){

           this.setState(prevState => ({
               taskList: [...prevState.taskList.slice(0, index), ...prevState.taskList.slice(index + 1)]
           }))

        }
    }

render(){
        return(
            <div className="tasks-wrap">
                <h1 onClick={()=>{
                   this.props.history.push("/taskdetails");
                }}>Your Tasks</h1>
                {
                            this.state.taskList.map((task,index)=>{
                                return(
                                    <div key={index} className="item-card" onClick={()=>{
                                        window.sessionStorage.setItem("task",JSON.stringify(task));
                                        this.props.history.push("/taskdetails/");
                                    }}>
                                        <div className="name">{task.name}</div>
                                        <div className="sub">
                                            <div className="type">Dataset: {task.dateSetName}</div>
                                            <div className="members">{task.userList.length + " participants"}</div>
                                        </div>
                                        <div className="del-wrap" onClick={(e)=>{
                                            e.stopPropagation();
                                            e.preventDefault();
                                            this.triggerDelete(index);
                                        }}>
                                            <img src={require("../../images/cancel.svg")}/>
                                        </div>
                                    </div>
                                );
                            })
                        }
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}