&& operator for React

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**

class MyComponent extends React.Component {
constructor(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>
  return (
       <button onClick={this.toggleDisplay}>Toggle Display</button>

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:

@egglearn Can you explain to us why you made the changes you did and what you are expecting them to do?

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 .

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>``` .

ah formatting error above


Toggle Display

The h1 element is in the render method (which is where you should be using the && operator). Your changes to the code has nothing to do with rendering anything. You will be using this.state.display and the && operator with the existing h1 element. That is where you need to focus your efforts.

ah ok , I will try again, thanks!

@egglearn To enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


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