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.
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.
2 Answers
Reset to default 12Pass 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})
}
}
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>
)
}
}