how to change className by state
class Component extends React.Component {
contructor(props) {
// Load all props
super(props);
this.state = {
isBoxVisible: false; // Change to true and see the difference
}
this.toggleBox = this.toggleBox.bind(this);
}
// Toggle isBoxVisible boolean state
toggleBox() {
this.setState({isBoxVisible: !this.state.isBoxVisible})
}
render() {
const { isBoxVisible } = this.state;
return (
<div className="App">
<button onClick={this.toggleBox}>Show Box</button>
<div className={`box ${isBoxVisible ? "" : "hidden"}`}>
<p>I'm the box</p>
</div>
</div>
);
}
}