React: question about setstate

[MAYDAY1993]

hi,I came up with some doubt using react,eg:

getInitialState(){
        return (
          instrument={
            row:{
              isSelected: false,
              name:'mayday'
            }
          };
        )
      },
//method 1
 this.state.instrument.row=true;
 this.setState(this.state);
//method 2
 this.setState(Object.assign({},instrument[row],{isSelected:true}));

Q1

instrument is an object, and I want to change the nested key's value such as isSelected,which method is better,I prefer the second,but I'm not sure if it works.

Q2
about nested object,which method is better to change the key's value?

[gaearon]

If you have a nested object, you can update it like this:

const newInstrument = Object.assign({}, instrument, {
  row: Object.assign({}, instrument.row, {
    isSelected: true
  })
});

It gets a little tedious so I would recommend to use the object spread syntax (available as Babel plugin, enabled by default in Create React App):

const newInstrument = {
  ...instrument,
  row: {
    ...instrument.row,
    isSelected: true
  }
};

This seems pretty readable to me. If you still don’t like it you can use one of the many helpers like updeep or immutability-helper to update nested objects without mutation.

[bgnx]

For more general solution I would recommend your first approach with mutation and invoking setState() (or forceUpdate() as alternative) instead of recreating new immutable object with Object.assign or spread operator, because with immutable approach it's non trivial to implement some deep property update where you have dynamic deep of nested objects like comments tree or similar ui, and also regeneration all ancestors objects including copying all items in arrays would decrease js performance compare to single property assignment

[monkindey]

This way

 this.state.instrument.row.isSelected =true;
 this.setState(this.state);

look like two way binding, but more redundant than two way binding, because you have to setState.

[jakecadams]

Creates dependency of course, but we've loved using https://ramdajs.com w/ React.

const R = require('ramda'); 

const newInstrument = R.assoc(
  "row",
  R.merge(instrument.row, { isSelected: true }),
  instrument
);

[gaizka-allende]

with seamless-immutable:

const newInstrument = setIn(instrument, ['row', isSelected'], true);

[SHUBHAMDAVE001]

what should be done if i have to use a object and spread operator in a setState function
_handleChangeTextBox1(e){ this.setState({allData:(this.state.textBox,{textBox:e.target.value} )}); console.log(e.target.value) }_
here allData is a function which has object textBox
textBox is a input area for data entry.
i have completed this example using different handle change event and different value for this.setState
how can i use this in one setState.

the older version of code which i have tried is this
_handleChangeTextBox(e){ this.setState({allData:{textBox: e.target.value}}); console.log(e.target.value) }_

but here the data change in one text box changes the data for all the handle change event.

[SHUBHAMDAVE001]

src (1)-20180621T060702Z-001.zip

Here i have attached the file
In this app.js and home.jsx file are the main file in home file there is the logic