2018-10-04 13:47:55 +00:00
---
title: State
---
# State
2018-10-27 17:30:44 +00:00
State in React is an object with observable properties that determines how a component behaves and renders.
2018-10-04 13:47:55 +00:00
2018-10-27 17:30:44 +00:00
State is a feature that is only available to classes, and should be considered private data. State is only available within a component, and can be passed to child components using [`props` ](../props )
2018-10-04 13:47:55 +00:00
Example of a Stateful Class Component:
2018-10-27 17:30:44 +00:00
```js
2018-10-04 13:47:55 +00:00
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
2018-10-27 17:30:44 +00:00
// We declare state below
2018-10-04 13:47:55 +00:00
this.state = {
x: "This is x from state",
y: "This is y from state"
}
}
render() {
return (
< div >
< h1 > {this.state.x}< / h1 >
< h2 > {this.state.y}< / h2 >
< / div >
);
}
}
export default App;
```
2018-10-27 17:30:44 +00:00
Another example using class properties and ES6 destructring:
#### Note: This example uses class fields which is a stage 3 proposal and is not a standard feature yet.
2018-10-04 13:47:55 +00:00
```javascript
import React from 'react';
class App extends React.Component {
2018-10-27 17:30:44 +00:00
state = {
fruits: ['apple', 'banana', 'strawberry', 'watermelon']
2018-10-04 13:47:55 +00:00
}
render() {
2018-10-27 17:30:44 +00:00
// Destructure `fruits` property from this.state
const { fruits } = this.state
2018-10-04 13:47:55 +00:00
return (
2018-10-27 17:30:44 +00:00
< ul >
{
fruits.map(fruit => (
< li key = {fruit} >
{fruit}
< / li >
))
}
< / ul >
2018-10-04 13:47:55 +00:00
);
}
}
2018-10-27 17:30:44 +00:00
2018-10-04 13:47:55 +00:00
export default App;
```
## Updating State
2018-10-27 17:30:44 +00:00
You should never try to modify your `state` object directly. Instead, use the `setState` method to update state on your component.
2018-10-04 13:47:55 +00:00
2018-10-11 23:00:38 +00:00
```js
this.setState({value: 1});
```
2018-10-27 17:30:44 +00:00
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:
2018-10-11 23:00:38 +00:00
2018-10-15 07:37:42 +00:00
#### The Wrong Way
2018-10-11 23:00:38 +00:00
```js
this.setState({value: this.state.value + 1});
```
2018-10-27 17:30:44 +00:00
This may lead to unexpected behavior 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 updater callback has two parameters - `state` and `props` , both of which are guaranteed to be up-to-date.
2018-10-11 23:00:38 +00:00
2018-10-27 17:30:44 +00:00
#### The Correct Way
2018-10-11 23:00:38 +00:00
```js
this.setState(prevState => ({value: prevState.value + 1}));
```
2018-10-27 17:30:44 +00:00
#### Using ES6 Destructuring
When only a limited number of properties in the state object are required, object destructing can improve readability.
2018-10-11 23:00:38 +00:00
```
this.setState(({ value }) => ({ value: value + 1 }));
```
2018-10-15 07:37:42 +00:00
#### More Information
2018-10-04 13:47:55 +00:00
- [React - State and Lifecycle ](https://reactjs.org/docs/state-and-lifecycle.html )
- [React - Lifting State Up ](https://reactjs.org/docs/lifting-state-up.html )
- [React Native - State Up ](https://facebook.github.io/react-native/docs/state.html )