Update useState Object Key Directly?

Question

I want to update my key value of comment to a new value, while keeping the other keys as is. I know I'll probably need spread operator ... but I'm not sure the exact syntax. What would I need to put in setResource() to accomplish this?

const VideoPage = () => {
  const [state, setResource] = useState(
    {
      video: 'placeholder'
      loading: 'placeholder'
      comment: 'placeholder'
    }
  )
  const funct = () => {
    setResource()
  }
}

score 18 · Accepted Answer · answered Dec 13 '19 at 15:13

18

If you want to keep other parts of the state you should do something like this:

setResource(prevState => ({
    ...prevState,
    comment: "new Value",
}))

Since the setter function for your state does not merge other values like the old setState method. This is why you should do a functional update.

answered Dec 13 '19 at 15:13

devserkan

16,870
4
31
47

Didn't notice your link at first. I will give it a read. – Robert C Dec 13 '19 at 15:43
@devserkan What if I want to update two value 1) video and 2) comment then do i need to write same code twice for video too ? – cakePHP Nov 19 '20 at 06:16
1

@cakePHP, you can update the `video` by using the same code. Just add the property and the new value. – devserkan Nov 19 '20 at 06:48

score 2 · Answer 2 · answered Dec 13 '19 at 15:18

2

Spread your object as it is and then update you required value.

const VideoPage = () => {
  const [state, setResource] = useState(
    {
      video: 'placeholder'
      loading: 'placeholder'
      comment: 'placeholder'
    }
  )
  const funct = () => {
    setResource({...state, comment:'Hello'})
  }
}

answered Dec 13 '19 at 15:18

akhtarvahid

9,445
2
26
29

I'm not quite sure spreading the current state directly is the right way here. At the end of the day, we are using the current state and updating it with the new value. Using functional updates maybe is a better idea. – devserkan Dec 13 '19 at 15:29

Update useState Object Key Directly?

2 Answers2