<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"));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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