<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 />
<Toggle on={on} onToggle={this.handleToggle} />
</div>
);
}
}
class Toggle extends React.Component {
initialState = { timesClicked: 0, on: false };
constructor(props) {
super(props);
this.state = this.initialState;
this.isPropsControlled = this.isPropsControlled.bind(this);
this.toggle = this.toggle.bind(this);
}
isPropsControlled() {
return this.props.on !== undefined;
}
toggle() {
if (this.isPropsControlled()) {
this.props.onToggle(!this.props.on);
} else {
this.setState(({ on }) => ({ on: !on }));
}
}
render() {
let on = this.isPropsControlled() ? this.props.on : this.state.on;
return (
<div>
<p>
{this.isPropsControlled() ? "Controlled" : "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.