Note: This document is a work in progress. You can help improve it.

React State


React is based on Components


Each component has props (properties)


props are read only values passed into a component from a parent

class Card extends React.Component {
render() {
return (
<div>
The ${this.props.face} of ${this.props.suit}
</div>
);
}
}
class Deck extends React.Component {
render() {
return (
<div>
<Card face="7" suit="Hearts" />
<Card face="A" suit="Diamons" />
</div>
);
}
}

STATE


STATE is

  • ... used to store information
  • ... local to that component
  • ... able to update and re-render the component

STATE is

  • ... used to pass data into child components.
  • ... sent from the parent to become props in the children

BASIC STATE

Using state within a component

  • where there is constructor(props) there will be super(props)
class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
age: 36
};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>I am {this.state.age} years old.</h2>
</div>
);
}
}

BASIC STATE

Using state to send props to a child component

class Person extends React.Component {
constructor(props) {
super(props);
this.state = {
age: 36
};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<AgeDisplay age={this.state.age} />
</div>
);
}
}

Updating State


Basic Example

  • setState() update state after the initial state setup
    • setState function in React works asynchronously
class Person extends Component {
constructor(props) {
super(props);
this.state = {
lastName: "Tennant"
};
}
updateLastName() {
this.setState({
lastName: "Smith",
maidenName: "Tennant"
});
}
render() {
return <div>${this.state.lastName}</div>;
}
}

Life Cycle


componentDidMount

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

source: https://reactjs.org/docs/react-component.html#componentdidmount

Full Source

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = { date: new Date() };
}
componentDidMount() {
setInterval(() => this.tick(), 1000);
}
tick() {
this.setState({ date: new Date() });
}
render() {
return (
<div>
<h3>The current time is</h3>
<h2>{this.state.date.toLocaleTimeString()}</h2>
</div>
);
}
}