How React Component state is going

[RayJune]

React component state allows our components to manage some data.

So just think about an object with various key-value pairs , and when that data changes the component will automatically re-render to reflect those changes.

All we have to do is manipulate the data and the component is going to take care of re-rendering itself.

1. Setup default state object
2. Component rendered with default state values
3. Change state based on event
4. Component re-rendered using new states
5. start at 3 again

this.setState can handle this situation:

demo MagicalCounter:

class MagicalCounter extends React.Component {
  constructor(props) {
    super(props);
    this.handleAddOne = this.handleAddOne.bind(this);
    this.state = {
      count: 0
    };
  }
  handleAddOne() {
    // this.state.count += 1; can't re-render automatically
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      };
    });
    console.log(this.state.count);
  }
  render() {
    return (
      <div>
        <h1>Magical Counter：{this.state.count}</h1>
        <button onClick={this.handleAddOne}>+1</button>
      </div>
    )
  }
}

ReactDOM.render(<MagicalCounter />, document.getElementById('app'));