how can I add new item to objects array

Question

const data = [
  {
    title: 'Todo',
    items: ['do home work', 'complete study'],
  },
  {
    title: 'In-Progress',
    items: ['learn tailwind', 'build some projects'],
  },
  {
    title: 'Completed',
    items: ['completed work'],
  },
];



const [list, setList] = useState(data);

const [text, setText] = useState('');

This addItem function adding a new copy of Todo every time when I add an item. How can I add the item to the todo without adding a new copy

const addItem = () => {
    setList((prev) => {
      return [
        (prev[0] = {
          ...prev[0],
          items: [text, ...prev[0].items],
        }),
        ...prev,
      ];
    });

    setText('');
};

enter image description here

You should have some id for find to which todo add a new item. Like addItem = (text, todoId). — Aleksandr Smyshliaev
– Aleksandr Smyshliaev, Commented Jul 25, 2021 at 13:35

Dennis Vash · Accepted Answer · 2021-07-25 13:38:00Z

1

This is some problematic design choice since you assuming your todos object is always first item in the array (prev[0]), but going straight forward is:

const addItem = () => {
  setList((prev) => {
    const [todoData, ...rest] = prev;
    return [{ ...todoData, items: [...todoData.items, text] }, ...rest];
  });

  setText("");
};

answered Jul 25, 2021 at 13:38

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

eneski · Accepted Answer · 2021-07-25 13:37:40Z

0

You need to create a new object, this is how react works.

React compares the previous state and the new state, then decides to is there a need to re-render the component. And React uses referential equality. If you just keep using the same object by modifying it, then React will think that no need to re-render the component because of the state object is always the same.

So, you should keep creating a new instance like the following..

const addItem = (item) => {
    setList((prev) => {
      return {
      ...prev,
      item
      }
    });

    setText('');
};

answered Jul 25, 2021 at 13:37

eneski

1,70522 silver badges42 bronze badges

Collectives™ on Stack Overflow

how can I add new item to objects array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related