Remove duplicate sections from 'react/state' (#18585)

* Remove duplicate sections from 'react/state'

The "updating state" section was duplicated, so I removed one of them.

I also corrected the heading levels for the subheadings below "updating state". It went from h2 to h5 and now goes properly from h2 to h3.

* Update index.md
pull/19211/head
Melissa 2018-10-15 02:37:42 -05:00 committed by Manish Giri
parent 5fafe9cd0e
commit 7e866537a1
1 changed files with 4 additions and 25 deletions

View File

@ -76,7 +76,7 @@ You can change the data stored in the state of your application using the `setSt
this.setState({value: 1});
```
Keep in mind that `setState` is asynchronous so you should be careful when using the current state to set a new state. A good example of this would be if you want to increment a value in your state.
Keep in mind that `setState` may be asynchronous so you should be careful when using the current state to set a new state. A good example of this would be if you want to increment a value in your state.
#### The Wrong Way
```js
@ -90,35 +90,14 @@ This can lead to unexpected behavior in your app if the code above is called mul
this.setState(prevState => ({value: prevState.value + 1}));
```
## Updating State
You can change the data stored in the state of your application using the `setState` method on your component.
```js
this.setState({value: 1});
```
Keep in mind that `setState` may be asynchronous so you should be careful when using the current state to set a new state. A good example of this would be if you want to increment a value in your state.
##### The Wrong Way
```js
this.setState({value: this.state.value + 1});
```
This can lead to unexpected behavior in your app if the code above is called multiple times in the same update cycle. To avoid this you can pass an updater callback function to `setState` instead of an object.
##### The Right Way
```js
this.setState(prevState => ({value: prevState.value + 1}));
```
##### The Cleaner Way
#### The Cleaner Way
```
this.setState(({ value }) => ({ value: value + 1 }));
```
When only a limited number of fields in the state object is required, object destructing can be used for cleaner code.
### More Information
#### More Information
- [React - State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
- [React - Lifting State Up](https://reactjs.org/docs/lifting-state-up.html)