How to update key/value of a nested state object (React JS)

Question

I am trying to update a key/value pair of a nested object in the state while the user types in the form. My state looks like this :

constructor(props) {
super(props);
this.state = {
  details: {
    detail1: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
    detail2: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
   detail3: {
      title: "",
      description: "",
      image1: null,
      image2: null,
    },
  },
};

}

This is my render method :

<form>
      <input
        type="text"
        value={this.state.creatives.creative1.title}
        onChange={(e) => {
          this.setState((prevState) => ({
            creatives: {
              ...prevState.creatives,
              creative1: {
                ...prevState.creatives.creative1,
                title: e.target.value,
              },
            },
          }));
          console.log(this.state.details.detail1.title);
        }}
      ></input>
    </form>

I have tried to update the key/value as above in the onChange method, but the console says that I cannot call .target on null. For some reason, The event.target returns null, I am not sure why. If anyone has a better solution to add the value typed to update the state, please do help.

@ZohaibIjaz Yes, I tried. It works and it can console log but when i do that inside the setState methods it throws me the same error of cannot read value of null. — Kavin Mukil
– Kavin Mukil, Commented Apr 16, 2020 at 18:11

BerndS · Accepted Answer · 2020-04-16 18:30:18Z

1

The event passed to onChange is a Synthetic Event. You can't use such an event in an asynchronous way as React will reuse the event. setState calls the updater function in an asynchronous way. If you store the event value in a constant and access that in setState, it should work.

https://reactjs.org/docs/events.html

https://reactjs.org/docs/react-component.html#setstate

onChange={(e) => {
   const value = e.target.value
   this.setState((prevState) => ({
       creatives: {
          ...prevState.creatives,
          creative1: {
            ...prevState.creatives.creative1,
            title: value,
          },
        },
      }));
      console.log(this.state.details.detail1.title);
    }}

answered Apr 16, 2020 at 18:30

BerndS

4092 silver badges9 bronze badges

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

2 Comments

Kavin Mukil Over a year ago

Thank you ! That fixed the problem, but when I console log the state, Its lagging by one last character ? What could be the reason ? I have placed my console log inside the onChange method so everytime we type it logs.

BerndS Over a year ago

I don't see the cause for that, maybe try using e.currentTarget.value instead?

Collectives™ on Stack Overflow

How to update key/value of a nested state object (React JS)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related