Removing a object from array state ReactJS

Question

I have a functional component, in that i have a array state with object as items. now i wanted to remove an item at particular position.

const [tasks, setTasks] = useState([
    { project: "aaaa", task: "xxxxx", status: true },
    { project: "bbbb", task: "yyyyz", status: true },
    { project: "cccc", task: "zzzzz", status: true }

  ]);

  function addTask(task) {
    setTasks(oldArray => [...oldArray, task]);
  }

  function deleteTask(pos) {
    let _tasks = tasks;
    _tasks.splice(pos, 1);
    setTasks(_tasks)
  }

here the task is get deleted but UI is not updated untill i add a new item to state array.

codemonkey · Accepted Answer · 2021-03-20 05:36:00Z

2

This won't create a copy of your state variable let _tasks = tasks;, merely a reference. So by doing that you're mutating the state variable directly. You could remove an element at a given position by simply doing this:

  function deleteTask(pos) {
    setTasks(oldArray => oldArray.filter((item, index) => index !== pos));
  }

This assumes that pos is an integer representing the index of the element you want to remove

edited Mar 20, 2021 at 5:36

answered Mar 20, 2021 at 5:28

codemonkey

7,9755 gold badges28 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Removing a object from array state ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related