react state change class code example

Example: 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>
  	);
  }
}