<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
This Pen doesn't use any external CSS resources.