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