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

class App extends React.Component {
  initialState = { on: false };

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

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

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

  render() {
    const { on } = this.state;

    return (
      <div>
        <Toggle on={on} onToggle={this.handleToggle} />
      </div>
    );
  }
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
  }
  
  toggle() {
      this.props.onToggle(!this.props.on);
  }

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

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