How do I update a specific key in an array of keys using React

Question

I've got a counter array, containing 3 objects.

const [counter, setCounter] = useState([
  { id: 0, count: [] },
  { id: 1, count: [] },
  { id: 2, count: [] }
])

Theres then 3 buttons that when pressed call the following function.

const update = (i, text) => {
  setCounter(currCount =>
    currCount.id === i
      ? { id: i, count: [...counter[i].count, text] }
      : currCount
  );
};

The buttons pass "i" which is 0,1,2 corresponding to the 3 object ids and "text" which is the error text. The function should update the specific object from the array adding the new error text to that id's count array. I cant seem to get this to work though, it keeps returning undefined.

Any help is appreiciated.

setCounter accepts an array and replaces counter (all the counters!). NIT: you should call the state object counters (in plural). — Nir Alfasi
– Nir Alfasi, Commented Sep 29, 2022 at 19:50

Pierre C. · Accepted Answer · 2022-09-29 20:10:38Z

1

The useState dispatch function (setCounter in your case) replaces the whole state with the value it is provided with.

In your example, you need to recreate the whole array like so:

const update = (i, text) => {
  setCounter(currCounter =>
    [
      ...currCounter.filter(count => count.id !== i), // the old counter state without the one we want to change
      { id: i, count: [...currCounter[i].count, text] }
    ]
  );
};

answered Sep 29, 2022 at 20:10

Pierre C.

1,4281 gold badge11 silver badges20 bronze badges

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

1 Comment

SlugLord Over a year ago

Great answer mate, I literally just finished writing the same thing out but you've beaten me to the punch XD. Had to tweak some of my code around but this now works exactly like how I want it to.

Collectives™ on Stack Overflow

How do I update a specific key in an array of keys using React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related