showing results for - "how to change classname by state"
Jace
18 Mar 2018
1class Component extends React.Component {
2  contructor(props) {
3    // Load all props
4    super(props);
5    
6    this.state = {
7    	isBoxVisible: false; // Change to true and see the difference
8    }
9    
10    this.toggleBox = this.toggleBox.bind(this);
11  }
12  
13  // Toggle isBoxVisible boolean state
14  toggleBox() {
15    this.setState({isBoxVisible: !this.state.isBoxVisible})
16  }
17  
18  render() {
19    const { isBoxVisible } = this.state;
20
21    return (
22      <div className="App">
23        <button onClick={this.toggleBox}>Show Box</button>
24
25        <div className={`box ${isBoxVisible ? "" : "hidden"}`}>
26          <p>I'm the box</p>
27        </div>
28      </div>
29  	);
30  }
31}