Storing an object in the state of a React component?

Question

Is it possible to store an object in the state of the React component? If so, how can we change the key value in this object using setState ? I think it is syntactically not allowed to write something like:

 this.setState({ abc.xyz: 'new value' }); 

Similarly, I have one more question: is it permissible to have a set of variables in the React component so that they can be used in any method of the component instead of being stored in state?

You can create a simple object that contains all of these variables and place it at the component level, just as you would declare any methods of the component.

It is very likely that you will encounter situations where you include a lot of business logic in your code, and this requires the use of many variables, the values ​​of which are changed by several methods, and then you change the state of the component based on these values.

Thus, instead of storing all these variables in a state, you save only those variables whose values ​​should be directly reflected in the user interface.

If this approach is better than the first question I wrote here, then I don't need to keep the object in state.

Answer 1

In addition to the post by kiran, an update assistant (previously a responsive addon ). This can be installed using npm using npm install immutability-helper

 import update from 'immutability-helper'; var abc = update(this.state.abc, { xyz: {$set: 'foo'} }); this.setState({abc: abc}); 

This creates a new object with an updated value, and the remaining properties remain unchanged. This is more useful when you need to do things like click on an array and set a different value at the same time. Some people use it everywhere because it provides immutability.

If you do this, you have the ability to offset performance

 shouldComponentUpdate: function(nextProps, nextState){ return this.state.abc !== nextState.abc; // and compare any props that might cause an update } 

Answer 2

1. this.setState({ abc.xyz: 'new value' }); syntax is not allowed. You must pass the whole object.

    this.setState({abc: {xyz: 'new value'}}); 

   If you have other variables in abc

    var abc = this.state.abc; abc.xyz = 'new value'; this.setState({abc: abc}); 

2. You can have regular variables if they do not rely on this.props and this.state .

Answer 3

You can use ES6 to propagate to previous values ​​in an object to avoid overwriting

 this.setState({ abc: { ...this.state.abc, xyz: 'new value' } }); 

Answer 4

this.setState({abc: {xyz: 'new value'}}); Will NOT work, as state.abc will be completely rewritten, not merged.

This works for me:

 this.setState((previousState) => { previousState.abc.xyz = 'blurg'; return previousState; }); 

If I do not read documents correctly, Facebook recommends this format. https://facebook.imtqy.com/react/docs/component-api.html

In addition, I think that the most direct path without a mutating state is through direct copying using the ES6 spread / rest operator:

 const newState = { ...this.state.abc }; // deconstruct state.abc into a new object-- effectively making a copy newState.xyz = 'blurg'; this.setState(newState); 

Answer 5

Despite the fact that this can be done using immutability-helper or the like, I do not want to add external dependencies to my code, unless I need it. When I need to do this, I use Object.assign . The code:

 this.setState({ abc : Object.assign({}, this.state.abc , {xyz: 'new value'})}) 

It can also be used in HTML event attributes, for example:

 onChange={e => this.setState({ abc : Object.assign({}, this.state.abc, {xyz : 'new value'})})} 

Answer 6

An easier way to do this in a single line of code

this.setState({object: {...this.state.object, objectVarToChange: newData}})

Answer 7

It worked for me.

 _onPress = () => { this.state.abc.xyz = "new value"; this.setState({}); } 

Edit:

 _onPress = () => { let newValue = this.state.abc newValue.xyz = "new value" this.setState({abc: newValue }); }