Issue on Use && for a More Concise Conditional

Issue on Use && for a More Concise Conditional
0

#1

Tell us what’s happening:

I put this code but it doesn’t work. I think it’s ok.

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) 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/


#2

Opening parenthesis should be on the same line as return line.


#3

Hi,

The problem you have can be quite technical (as long as I understand it right).

To correct it, make sure that you have this:

return (

instead of:

return
(

Technical bit:

As I understand it, JS automatically adds semicolons where it thinks they should be, so I think that you current code is effectively:

return ;

which means nothing is being return from the render function.

You can read about semicolon insertion here:

Hope this helps :slight_smile: