Use && for a More Concise Conditional -error debugging

JavaScript
1

Tell us what’s happening:
cannot figure out what the error in this is. Thank you!

Your code so far


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>
      {(this.state.display) && 
        <div>
         <button onClick={this.toggleDisplay}>Toggle Display </button>
         <h1> Displayed! </h1>
       </div>}
       <div>
            <button onClick={this.toggleDisplay}>Toggle Display</button> 
      </div>

      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

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

3

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>
  


);

}
};

This shows a minified react error:

/ running test
Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=MyComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=MyComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=MyComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Minified React error #152; visit https://reactjs.org/docs/error-decoder.html?invariant=152&args[]=MyComponent for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
// tests completed

4

Remove the whitespace between h1 tags!

5

Use

return (

and remove white space between h1 tags