react integration with other applications article

app title on change

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

  componentDidUpdate(prevProps, prevState) {
    const { showCounter, title } = this.state;
    const shouldUpdateCounter =
      prevState.showCounter !== showCounter || prevState.title !== title;
    if (shouldUpdateCounter) {
      if (showCounter) {
        window.ReactCounter.mount({ title });
      } else {
        window.ReactCounter.unmount();
      }
    }
  }

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

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

  render() {
    const { title } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img onClick={this.toggleCounter} src={logo} className="App-logo" alt="logo" />
          <div id="counter-app"></div>
          <p>
            This is the main App.
          </p>
          <input value={title} onChange={this.onTitleChange} />
        </header>
      </div>
    );
  }
}