How to delete element onclick in Reactjs?

Question

I have made CARD's which display's username. When I click on the delete button i.e 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.

Prakash Sharma · Accepted Answer · 2018-05-04 06:04:48Z

12

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})
   }
}

answered May 4, 2018 at 6:04

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

stone rock Over a year ago

Can you please explain this line -> ` k.splice(index, 1);`

Prakash Sharma Over a year ago

@stonerock That line will remove one element at index from the array. You can read about this: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Vikas Yadav Over a year ago

splice just takes the index of the element and will remove one element after index i.e. the element you want to delete and everything will be same as before. The thing with splice is it doesn't create new copy of the array. Mutating states is not a good thing always.

stone rock Over a year ago

@Prakash How will I get index parameter ? I am displaying data from REST API in card see the response -> imgur.com/a/VwWsQJF

Prakash Sharma Over a year ago

@stonerock from here => this.state.taskList.map((task,index)=>{

|

Shubham Khatri · Accepted Answer · 2018-05-04 06:18:44Z

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>
        )
    }
}

I tried your approach but when the dialog box comes and when I click on ok entire web page becomes blank after that.
are you sure you used slice and not splice, also can you confirm what is the state after update in setState callback

Collectives™ on Stack Overflow

How to delete element onclick in Reactjs?

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related