# State use with event

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      clicked: false
    }
    
    this.handlerClick = this.handlerClick.bind(this);
  }
  
  handlerClick() {
    // this.setState({}) // async
    this.setState((prevState) => ({
      clicked: !prevState.clicked
    })) // sync
  }
  
  render() {
    return (
     <div>
        <div className={ 'bold ' + (this.state.clicked ? 'red': '') }>My Text Color change</div>
        <button onClick={this.handlerClick}>Change Color</button>
        <br />
        { '' + this.state.clicked }
     </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#mountNode"))

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      num: 0
    }
    
    this.handlerClick = this.handlerClick.bind(this);
  }
  
  handlerClick() {
    // async - object compare
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    })
    this.setState({
      num: this.state.num + 1
    })
    // result = 1
    
    // sync - unable to compare functions
    // this.setState((prevState) => ({
    //   num: prevState.num + 1
    // }))
    // this.setState((prevState) => ({
    //   num: prevState.num + 1
    // }))
    // this.setState((prevState) => ({
    //   num: prevState.num + 1
    // }))
    // result = 3
  }
  
  render() {
    return (
     <div>
        <div>{ this.state.num }</div>
        <br />
        <button onClick={this.handlerClick}>Change Color</button>
     </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#mountNode"))