Updating array with React hooks

Question

I am fundamentally misunderstanding React hooks, especially the useState function. Why doesn't the code below update the index of the old array, and instead set the value of trick to 1? I understand how to push a new item onto an array with React hooks, but how do you update existing values?

const [trick, modifyTrick] = useState([null, null, null, null]);

const identityTrick = () => {
    modifyTrick(oldTrick => oldTrick) //works
}

const updatedTrick = () => {
    modifyTrick(oldTrick => oldTrick[0] = 1) //sets the entire value of trick to 1
}

Possible duplicate of [How do I update states onchange in an array of object in React Hooks](https://stackoverflow.com/questions/55987953/how-do-i-update-states-onchange-in-an-array-of-object-in-react-hooks)? — crashmstr, Feb 17 '20 at 12:48

score 1 · Answer 1 · answered Feb 17 '20 at 12:47

1

Try this one

  const updatedTrick = () => {
    modifyTrick(oldTrick => {
      let newTrick = [...oldTrick];
      newTrick[0] = 1;
      return newTrick;
    })
  }

answered Feb 17 '20 at 12:47

Max

582
1
4
13

score 1 · Answer 2 · answered Feb 17 '20 at 12:50

1

You can also do it like this:

const updateTrick = () => {
    modifyTrick(oldTrick => {
      oldTrick[0] = 1;
      return oldTrick;
    });
};

answered Feb 17 '20 at 12:50

Eliecer Chicott

541
4
7

is the callback parameter not the reference – Eliecer Chicott Feb 17 '20 at 12:51
You're getting it wrong inside the function oldTrick is a new variable not the state one – Eliecer Chicott Feb 17 '20 at 12:52

score 1 · Accepted Answer · answered Feb 17 '20 at 12:52

1

If you provide modifyTrick a function, the return value will be the new value of trick.
The return value of your function is 1, so that's why trick is set to 1.

oldTrick[0] = 1 //this expression returns 1.

Modify oldTrick array in your modifyTrick function, and than return it:

const updatedTrick = () => {
    modifyTrick(oldTrick => {
       oldTrick[0] = 1

       return oldTrick;
    });
};

answered Feb 17 '20 at 12:52

Ido

5,363
2
21
30

Why is the return value 1? – Perplexityy Feb 18 '20 at 10:42
@Perplexityy The assignment operator = also returns a value: the value you just set the variable to. – Ido Feb 18 '20 at 10:47
1

Think about the expression: 'x = y = 5;'. first y = 5 is executed, and returns the value 5. Because it returned the value 5, the next assignment (x = 5) is possible. – Ido Feb 18 '20 at 10:49
Interesting, I never knew that. Thanks! – Perplexityy Feb 18 '20 at 11:20

Updating array with React hooks

3 Answers3