Updating Object's values inside an object with React Hooks

Question

Having tough time trying to update just the "values" property which is a object within an object. I am not super familiar with the reactjs or its shenanigans.

const [properties, setProperties] = useState({})

<Form.Control onChange={e => setProperties(prevState => ({...prevState, values: {a: value}}))}>
<Form.Control onChange={e => setProperties(prevState => ({...prevState, values: {b: value}}))}>

Final object should look like this:

{ 
  x: 1, <-- These have their  
  y: 2, <-- own inputs
  values: { 
    a: "A value", 
    b: "B value" 
  }
}

But currently after typing to one the inputs value A overrides B or vice-versa. I tried searching answers from web, but none concerned updating object's object

Brian Thompson · Accepted Answer · 2020-03-15 19:22:56Z

6

You're close. You have to spread the nested objects properties back into it just like you did with prevState.

setProperties(prevState => ({...prevState, values: {...prevState.values, b: e.target.value}}))

Spreading prevState makes a new object out of its values. But when you specify a key to overwrite the values taken from prevState are gone. Basically, you aren't merging prevState.values with the new values. You're overwritting it.

To fix this you need to provide the whole nested object again. The easiest pattern for that is the one above. Spread prevState.values, then overwrite the nested key you want to change.

Note: If you use an event in a functional update, you need to either save the value to another variable, or use e.persist() first. The reason is that React reuses event objects for performance reasons, so e will be reset before the async update happens. using persist removes the event from the pool for reuse, and you may access its values normally.

Example:

const handleChange = (e) => {
  e.persist();
  setProperties(prevState => (
    {
      ...prevState, 
      values: {...prevState.values, b: e.target.value}
    }
  ))

  // OR

  let value = e.target.value;
  setProperties(prevState => (
    {
      ...prevState, 
      values: {...prevState.values, b: value}
    }
  ))
}

As another note, I only used a functional update in my answer because that is how the question was given. But in this usecase it is not required. You may use a normal state update safely for this handler.

edited Mar 15, 2020 at 19:22

answered Mar 15, 2020 at 17:15

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

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

4 Comments

Skege Over a year ago

Thank You Brian, Did you mean this?: onChange={e => setProperties(prevState => ({...prevState.values, values: {a: e.target.value}}))}. This results into an error: TypeError: Cannot read property 'value' of null

Brian Thompson Over a year ago

Yeah that seems right. I copied it directly from the question, I didn't pay attention to the missing e.target.

Skege Over a year ago

Hello Brian, This method is invalid. For some reason e.target.value appears to be null. Thus the error mentioned before. I read somewhere that you have to use persist() method on the particular event, if you want your method to work.

Brian Thompson Over a year ago

It's not my method. I just copied it from your question. The solution I gave is not invalid. The solution I provided was that you need to replace all object values that you overwrite. In your question you claimed that it was updating one value but losing the other. This is the update pattern to fix it. If you use the functional update, yes you need to use e.persist() before the code I gave. This is because React reuses event objects for performance reasons.

Erik · Accepted Answer · 2020-03-15 17:46:12Z

2

The new state is not computed using old values, so you don't need to pass a function to setProperties. Instead, you can write it simply like this:

const [properties, setProperties] = useState({})

<Form.Control onChange={e => setProperties({ ...properties, values: { ...properties.values, a: e.target.value }})}>
<Form.Control onChange={e => setProperties({ ...properties, values: { ...properties.values, b: e.target.value }})}>

Hope that helps!

answered Mar 15, 2020 at 17:46

Erik

1881 silver badge7 bronze badges

1 Comment

Erik Over a year ago

Great – happy to help!

Asking · Accepted Answer · 2020-03-15 17:25:47Z

0

import React, {
    useState
} from "react";


function Test() {
    const [state, setState] = useState({
            x: 1, 
            y: 2, 
            values: { 
              a: "A value", 
              b: "B value" 
            }
    });
    const changeA = (e) => {
        const val = e.target.value;
        setState({...state, a: val})
    }
    const changeB = (e) => {
        const val = e.target.value;
        setState({...state, b: val})
    }
    return (
         <div>
           <input onChange={changeA}/>
           <input onChange={changeB}/>
        </div>
    );
}

export default Test;

answered Mar 15, 2020 at 17:25

Asking

4,25621 gold badges84 silver badges170 bronze badges

Collectives™ on Stack Overflow

Updating Object's values inside an object with React Hooks

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related