Simple React Class Component with state toggle pattern
Wed Feb 09 2022 12:44:36 GMT+0000 (Coordinated Universal Time)
Saved by
@Sensei_p
import React from "react"
export default class App extends React.Component {
state = {
goOut: "Yes"
}
// Arrow function, not function declaration, because it uses setState method
toggleGoOut = () => {
this.setState(prevState => {
return {
goOut: prevState.goOut === "Yes" ? "No" : "Yes"
}
})
}
render() {
return (
<div className="state">
<h1 className="state--title">Should I go out tonight?</h1>
<div className="state--value" onClick={this.toggleGoOut}>
<h1>{this.state.goOut}</h1>
</div>
</div>
)
}
}
content_copyCOPY
Comments