set value to nested state using variable in reactJS

Question

I have defined a variable which will paste value as key inside userInfo.

this.state = {
      userInfo: {
        firstName: "",
        lastName: "",
        email: ""
      }
}
//_________________________________________
onChange = (e)=>{
    var stateChild = e.target.name // stateChild here is variable which will return (firstname, lastName or email) of userInfo
    var userInfo = {
     // ...this.state.userInfo
    }
    userInfo.stateChild = e.target.value; //  I want to paste state child's value here
    console.log(userInfo.stateChild);
}

Tomasz Mularczyk · Accepted Answer · 2018-05-03 07:54:33Z

1

I don't any setState in your handler. Have you tried:

this.state = {
  userInfo: {
    firstName: "",
    lastName: "",
    email: ""
  }
};

onChange = e => {
  this.setState(prevState => ({
    userInfo: {
      ...prevState.userInfo,
      [e.target.name]: e.target.value
    }
  }));
};

answered May 3, 2018 at 7:54

Tomasz Mularczyk

36.4k19 gold badges118 silver badges176 bronze badges

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

4 Comments

Thydaduong Over a year ago

using this it created new key inside userInfo. i expect to modify the value of the key that match to e.target.name

Tomasz Mularczyk Over a year ago

what is the new key created?

Thydaduong Over a year ago

i mean if e.target .name = firstName, it did't pass value to the firstName. it seem create new firstName.

Tomasz Mularczyk Over a year ago

No, it can't be two the same keys in object :)

Collectives™ on Stack Overflow

set value to nested state using variable in reactJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related