How do I setState for nested object?

You have a few options:

  1. With ECMA6, you can use the Object spread proposal (...) to create copies of objects with updated properties.

    this.setState({
      access: {
        ...this.state.access,
        hospital_id: 1,
      },
    });
    
  2. You can use the native assign function on the Object (Object.assign())

    this.setState({
      access: Object.assign({}, this.state.access, {
        hospital_id: 1,
      }),
    });
    
  3. Or for the shortest version and atomic update:

     this.setState(({access}) => ({access: {
       ...access,
       hospital_id: 1,
     }});
    
  4. And one more option is the updates addon:

    var update = require('react-addons-update');
    // per React docs 
    // https://reactjs.org/docs/update.html 
    // , you may want to change this to 
    // import update from 'immutability-helper';
    this.setState({
      access: update(this.state.access, {
        hospital_id: {$set: 1},
      })
    });
    

I would recommend using the first one.

Leave a Comment