<div class="main">
  <h3>
    Increase or decrease the number:
  </h3>
  <div id="root"></div>
</div>
.main {
  text-align: center;
  width: 240px;
}

.number {
  font-size: 20px;
}

.controls {
  margin-top: 10px;
}

.controls button:first-child {
  margin-right: 10px;  
}
class App extends React.Component {  
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }

  render() {
    return (
      <div className="app"> 
        <span className="number">{this.state.number}</span>
        <Controls parent={this} />
      </div>
    );
  }
}

class Controls extends React.Component {  
  render() {
    return (
      <div className="controls">
        <button onClick={() => this.updateNumber(+1)}>
          Increase
        </button> 
        <button onClick={() => this.updateNumber(-1)}>
          Decrease
        </button>
      </div>
    );
  }

  updateNumber(toAdd) {
    this.props.parent.setState(prevState => ({
      number: prevState.number + toAdd       
    }));
  }
}

ReactDOM.render(<App />, document.getElementById('root')); 
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js