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? — crashmstr
– crashmstr, Commented Feb 17, 2020 at 12:48

Ido · Accepted Answer · 2020-02-17 12:52:13Z

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, 2020 at 12:52

Ido

5,8002 gold badges27 silver badges33 bronze badges

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

4 Comments

Perplexityy Over a year ago

Why is the return value 1?

Ido Over a year ago

@Perplexityy The assignment operator = also returns a value: the value you just set the variable to.

Ido Over a year ago

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.

Perplexityy Over a year ago

Interesting, I never knew that. Thanks!

Max · Accepted Answer · 2020-02-17 12:47:41Z

1

Try this one

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

answered Feb 17, 2020 at 12:47

Max

6801 gold badge5 silver badges15 bronze badges

Comments

Eliecer Chicott · Accepted Answer · 2020-02-17 12:50:20Z

1

You can also do it like this:

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

answered Feb 17, 2020 at 12:50

Eliecer Chicott

5914 silver badges7 bronze badges

2 Comments

Eliecer Chicott Over a year ago

is the callback parameter not the reference

Eliecer Chicott Over a year ago

You're getting it wrong inside the function oldTrick is a new variable not the state one

Collectives™ on Stack Overflow

Updating array with React hooks

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related