<div id="root"></div>

class App extends React.Component {
  render() {
    return (
      <div>
        <Toggle />
      </div>
    );
  }
}

class Toggle extends React.Component {
  initialState = { timesClicked: 0, on: false };

  constructor(props) {
    super(props);
    this.state = this.initialState;

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
      this.setState(({ on }) => ({ on: !on }));
  }

  render() {
  const on = this.state.on;
    return (
      <div>
        <p>
          Uncontrolled Component
        </p>
        <button type="button" onClick={this.toggle}>
          {on ? "on" : "off"}
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));