JAVASCRIPT

react extends component Increment data

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 (
    <>
        <button onClick = {this.setNewNumber}>Increment</button>
        <Content myNumber = {this.state.data}>0</Content>
          </>
  );
}
}

class Content extends React.Component {
  componentWillMount(){
    console.log('Component will MOUNT!')
  }
  componentDidMount(){
    console.log('Component DID MOUNT!')
  }
  componentWillReceiveProps(newProps){
    console.log('COmponent will RECEIVE PROPS')
  }
  shouldComponentUpdate(newProps, newState){
    return true;
  }
   componentWillUpdate(nextProps, nextState){
    console.log('COmponent Will Update!')
  }
   componentDidUpdate(prevProps, prevState){
    console.log('COmponent DID Update!')
  }
  componentWillUnmount() {
    console.log('COmponent Will Unmount!')
  }
  
  render() {
    return(
    <>
        <h3> {this.props.myNumber}</h3>
        </>
    );
  }
  
  }
ReactDOM.render(
<App /> , document.getElementById ('mountNode'));