Update an array value with useState's old values

Question

I'm sure this is a simple question but I can't figure this out.

const [rowLabels, setRowLabels] = React.useState(['','','','','',]);

i figured this would work. but it doesn't like the syntax.

setRowLabels(oldValues => ([
  ...oldValues,
  oldValues[position]: event.target.value
])

I know I can do this below, but I rather not pass down rowLabels as props to avoid the re-render. Is there a way I can do it with just the oldValues?

const rowLabelsCopy = [...rowLabels];
rowLabelsCopy[position] = event.target.value;
setRowLabels(rowLabelsCopy);

You can't mix computed property syntax with array spread syntax unfortunately. — Patrick Roberts, Jul 10 '19 at 18:16
This should work: `setRowLabels(oldValues => oldValues.map((ov, i) => i === position ? event.target.value : ov));` — ChrisG, Jul 10 '19 at 18:18
@ChrisG ah nice little hack. it makes sense and works. there's a typo though the last ? is supposed to be a colon. — user1189352, Jul 10 '19 at 18:21
Fixed, however there's this: https://stackoverflow.com/questions/28121272/whats-the-best-way-to-update-an-object-in-an-array-in-reactjs — ChrisG, Jul 10 '19 at 18:24
@PatrickRoberts I know, that's why I linked to it instead of marking this as dupe. It still shows various ways of creating a new array based on the old one, and it doesn't really matter if you call `setState` or the hook method. — ChrisG, Jul 10 '19 at 18:26

score 1 · Accepted Answer · answered Jul 10 '19 at 18:20

The setState() function accepts a callback as you demonstrated in your first failed attempt. That callback can contain the lines in your second attempt, and allow you to use oldValues instead of rowLabels:

setRowLabels(oldValues => {
  const newValues = [...oldValues];
  newValues[position] = event.target.value;
  return newValues;
});

Or if you don't want to use an explicit return, here's a slightly less readable alternative:

setRowLabels(oldValues => Object.assign(
  [...oldValues],
  { [position]: event.target.value }
));

Update an array value with useState's old values

1 Answers1