Toggle

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      display: true
    }
    this.toggleDisplay = this.toggleDisplay.bind(this);
  }
  
  toggleDisplay() {
    this.setState({
      display: !this.state.display
    });
  }
  
  render() {
    // change code below this line
      return (       
        <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         {this.state.display && <h1>Displayed!</h1>}
       </div>
    )
  }
};

ReactDOM.render(
	<MyComponent />,
  document.getElementById('root')
)


/* render() {
    // change code below this line
    if(this.state.display){
      return (       
        <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
         <h1>Displayed!</h1>
       </div>);
    }else{
      return (       
        <div>
         <button onClick={this.toggleDisplay}>Toggle Display</button>
       </div>);
    } */