react integration with other applications article

app with ReactCounter

class App extends Component {
  state = {
    showCounter: false,
    title: 'Whaaa! cool',
    currentCount: 3
  }

  toggleCounter = () => this.setState(({ showCounter }) => ({ showCounter: !showCounter }));

  onTitleChange = ({ target }) => this.setState({ title: target.value });

  onCountUpdate = currentCount => this.setState({ currentCount });

  render() {
    const { title, currentCount, showCounter } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <ReactCounter title="counter two" />
          <img onClick={this.toggleCounter} src={logo} className="App-logo" alt="logo" />
          {
            showCounter && (
              <ReactCounter
                title={title}
                initialCount={currentCount}
                onCountUpdate={this.onCountUpdate}
              />
            )
          }
          <p>
            This is the main App.
          </p>
          <div>{`The count is ${currentCount}`}</div>
          <input value={title} onChange={this.onTitleChange} />
        </header>
      </div>
    );
  }
}