JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<div id="app"></div>
<div id="print1"></div>
<div id="print2"></div>
<div id="print3"></div>
<div id="print4"></div>

React

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: 0
    }
    this.setNewNumber = this.setNewNumber.bind(this);
  };

  setNewNumber() {
    this.setState({data: this.state.data + 1})
  }

  render() {
    return (
      <div>
        <button onClick = {this.setNewNumber}>INCREMENT</button>
        <Content myNumber = {this.state.data}></Content>
      </div>
    );
  }
}

class Content extends React.Component {
  componentWillMount() {
    document.getElementById("print1").innerHTML = ('Component WILL MOUNT!');
  }
  componentDidMount() {
    document.getElementById("print2").innerHTML = ('Component DID MOUNT!');
  }
  componentWillReceiveProps(newProps) {          
    document.getElementById("print3").innerHTML = ('Component WILL RECIEVE PROPS!');
  }
  shouldComponentUpdate(newProps, newState) {
    return true;
  }
  componentWillUpdate(nextProps, nextState) {
    document.getElementById("print4").innerHTML = ('Component WILL UPDATE!');
  }
  componentDidUpdate(prevProps, prevState) {
    console.log('Component DID UPDATE!')
  }
  componentWillUnmount() {
    console.log('Component WILL UNMOUNT!')
  }
  render() {
    return (
      <div>
        <h3>{this.props.myNumber}</h3>
      </div>
    );
  }
}

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

setTimeout(() => {
ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 1000);