How to remove element(s) from a state array variable?

user_17408714 0
Viewed 40

I have a state variable tasks, which is an array of objects:

const [tasks, setTasks] = useState([
    {
      user: "",
      text: "Finish this page",
      deadline: new Date("05/01/2022"),
      complete: true,
      priority: "high",
      project: "Gravity",
      // ToDo: Set priority based on date while creating task
    },
    {
      text: "Finish Pierian UI/UX",
      deadline: new Date("05/10/2022"),
      complete: false,
      priority: "med",
    },
    {
      text: "Finish Internship",
      deadline: new Date("05/05/2022"),
      complete: false,
      priority: "low",
    },
    {
      text: "Anaadyanta",
      deadline: new Date("05/12/2022"),
      complete: false,
      priority: "med",
    },
    {
      text: "Random task",
      deadline: new Date("05/19/2022"),
      complete: false,
      priority: "high",
    },
  ]);

I want to remove elements whose complete is true. I am unable to think of the correct syntax while using setTasks. Please help.

reactjs frontend arrays javascript
2 Answers

You should filter tasks and set new state:

const updatedTasks = tasks.filter((el)=> el.complete !== 'true');
setTasks(updatedTasks);
user_94381640

you should pass callback inside setTasks:

setTask((prevTasks) => prevTasks.filter(({ complete }) => !complete));

The prevTasks always going to be the latest state, React insures it. You should always use callback when next state relies on previous. Also the name of prev variable passed in callback could be whatever you choose, here I named it prevTasks.

user_174318160
Related