React onClick example

/* setState always calls render again and it is async */

/* Calling UPPERCASE onClick with React */

class ClickExample extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "tim" };
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button
          type="button"
          onClick={() => this.setState({ name: "TIM" })}
        />{" "}
        UPPERCASE
      </div>
    );
  }
}

/**
 * The class has one state, name with value 'tim',
 * The p tag displays the state.name value,
 * When the button is clicked it will run the setState() callback, The onClick event will run
 * that will replace the string value to 'TIM'
 * When the setState is run later on, it will call render() again and it will remount the component
 */

/* With the method inside the class */
class ClickExample2 extends Component {
  constructor(props) {
    super(props);
    this.state = { name: "tim" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    this.setState((prevState, props) => ({
      name: prevState.name.toUpperCase()
    }));
  }

  render() {
    return (
      <div>
        <p>{this.state.name}</p>
        <button type="button" onClick={this.handleClick} />
        UPPERCASE
      </div>
    );
  }
}

/**
 * The class has a method that receives an event (the click), that will setState as callback
 * and replace the name toUppeCase
 * The class constructor will set bind the instance of thisHandleClick to itself
 * as it loses scope when called async
 */