&& operator for React

JavaScript
1 
so I have put the condition as this.state.display but and when it is false it should return the code without the h1 tag but it doesnt. i tried putting the code inside a return() but that causes errors

**Your code so far**
      
```jsx

class MyComponent extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    display: true
  }
  this.toggleDisplay = this.toggleDisplay.bind(this);
}
toggleDisplay() {
  this.setState(state => ({
    display: !state.display
  }));
}
render() {
  // change code below this line

  {this.state.display == false && <div>
       <button onClick={this.toggleDisplay}>Toggle Display</button>
   
     </div>}
  
  
  return (
     <div>
       <button onClick={this.toggleDisplay}>Toggle Display</button>
       <h1>Displayed!</h1>
     </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36.

Challenge: Use && for a More Concise Conditional

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/use--for-a-more-concise-conditional

3

read all tests carefully. it says you need to hide and show <h1> element according to this.state.display . so use the condition on <h1> element not on <div> and <button>.
and check for this.state.display not for this.state.display==false .

4

yes, my understanding is that I am meant to return the code without the h1 tag if the state.display is equal to false but I have to use the && operator. The operator works as such {condition && code that is returned}. I am expecting that under the condition that that the state is false the code after the && will return (without the h1 , ie this code `` Toggle Display

 </div>``` .
5

ah formatting error above

&&


Toggle Display
}
7

ah ok , I will try again, thanks!

9 
ah so simple {this.state.display && <h1>Displayed!</h1>}
```