React: SetState not updating nested object value

Question

My property in my state looks like this:

state: {
    styling: {
          styling: {
              card: {
                  height: auto;
   }
  }
 }
}

I want the height property to update on user input from an Input element, so I created a function like this:

  handleCardChange = (event, style) => {
let property = "styling.styling." + style;
let updatedState = {
  "styling.styling.card.height": event.target.value
}
console.log(updatedState);
this.setState(updatedState);

}

where the style parameter is a string containing the path to the property being updated, in this cased "card.height". I created an object for the new state and tried passing it into setState but it doesn't update the height property.

Anyone know how to solve this problem? I'm stumped!

This might help: How to update nested state properties in React — thenaamsake
– thenaamsake, Commented Nov 26, 2018 at 13:00
Possible duplicate of How to update nested state properties in React — reisdev
– reisdev, Commented Nov 26, 2018 at 13:01
You may use immutability-helper which is mentioned on React's official doc — im_tsm
– im_tsm, Commented Nov 26, 2018 at 13:16

ttncrch · Accepted Answer · 2018-11-28 11:29:50Z

1

According your code, updatedStyle is

{
  "styling.styling.card.height": xxxx
}

whereas you want:

styling: {
    styling: {
        card: {
            height: auto;
        }
    }
}

updatedStyle would be something like:

setState(previousState => ({
  styling: {
    ...previousState.styling,
    styling: {
      ...previousState.styling.styling,
      card: {
        ...previousState.styling.styling.card,
        height: event.target.value
      }
    }
  }
})

Or use a tool like https://github.com/mweststrate/immer to make it less verbose

edited Nov 28, 2018 at 11:29

answered Nov 26, 2018 at 13:01

ttncrch

7,31311 gold badges39 silver badges62 bronze badges

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

1 Comment

MrShedford Over a year ago

Thank you so much for your help!

icewhite · Accepted Answer · 2018-11-26 13:09:00Z

1

You can't access sub-elements like that. It will add a property with a key of styling.styling.card.height to the updateState object, which isn't what you want.

If you're sure all that nesting is necessary, try this: this.setState({styling: {styling: {card: {height: event.target.value}}}})

answered Nov 26, 2018 at 13:09

icewhite

4173 silver badges15 bronze badges

Collectives™ on Stack Overflow

React: SetState not updating nested object value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related