<div id="root"></div>
class Lamp extends React.Component {
constructor(props) {
super(props);
this.state = {
switchedOn: false,
timesSwitched: 0
};
}
switch() {
this.setState((prevState) => ({
switchedOn: !prevState.switchedOn
}));
this.setState((prevState) => ({
timesSwitched: prevState.timesSwitched + 1
}));
}
render() {
return (
<>
<p>Lamp is {this.state.switchedOn ? "on" : "off "}</p>
<p>Switch was used {this.state.timesSwitched} times</p>
<button onClick={() => this.switch()}>Switch</button>
</>
);
}
}
ReactDOM.render(<Lamp />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.