stateful-stateless-react.js

import React, { Component } from 'react';

class Display extends Component {
    render() {
        return <div>{this.props.number}</div>;
    }
}

class App extends Component {

    constructor() {
        super();
        this.state = { number: 0 };
    }

    _increment = () => {
        this.setState(prevState => ({
            number: prevState.number + 1
        }));
    }

    _decrement = () => {
        this.setState(prevState => ({
            number: prevState.number - 1
        }));
    }

    render() {
        return (
          <div>
            <h3>Main Container</h3>
            <Display number={this.state.number} />
            <button onClick={this._increment}>Increment</button>
            <button onClick={this._decrement}>Decrement</button>
          </div>
        );
    }
}

export default App;