Source:  Twitter logo

For a plugin I'm using I have to have a state that looks like this:

getInitialState() {
  return {
    invalid: true,
    access: {
      access_code: '',
      zipcode: '',
      password: '',
      confirm: '',
      hospital_id: '',
    },
  }
},

How would I set the state of hospital_id without setting the rest of access?

This seems to remove everything but hospital_id:

this.setState({access: {hospital_id: 1}})

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.

98 users liked answer #0dislike answer #098
Brigand profile pic
Brigand
let newAccess = Object.assign({}, this.state.access);
newAccess.hospital_id = 1;
this.setState({access: newAccess});
16 users liked answer #1dislike answer #116
J. Mark Stevens profile pic
J. Mark Stevens

My preferred way of doing this now is as simple as:

let newAccess = this.state.access;
newAccess.hospital_id = 1;
setState({access: newAccess});

Slightly simpler than the current accepted answer.

EDIT (based on the question from @SILENT )

It looks like this is actually a potentially dangerous method. Further reading here React: A (very brief) talk about immutability.

Looks like a better way to do this would be:

let newAccess = Object.assign({}, this.state.access, {hospital_id:1});
this.setState({access: newAccess});
2 users liked answer #2dislike answer #22
Dan G Nelson profile pic
Dan G Nelson

Another way to do this would be

const newAccess = {...this.state.access};
newAccess.hospital_id = 1;
setState({access: newAccess});

Use of the spread operator creates a clone of this.state.access.

1 users liked answer #3dislike answer #31
twocents profile pic
twocents

I had this same issue too(not the same context) anyways, i did the code below in my own work and it worked perfectly

this.setState({
  access: {
    ...this.state.access,
    hospital_id: 1,
  },
});
1 users liked answer #4dislike answer #41
Shay1309 profile pic
Shay1309

The best way for this , is ES6 , you can update state with spread object ( in this way you re assign the "hospital_id" ), like this :

this.setState({ access : {...this.state.access , hospital_id : 1 } })
0 users liked answer #5dislike answer #50
ehsan parsania profile pic
ehsan parsania

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).