Issue on Use && for a More Concise Conditional

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) {
    this.state = {
      display: true
    this.toggleDisplay = this.toggleDisplay.bind(this);
  toggleDisplay() {
      display: !this.state.display
  render() {
    // change code below this line
           <button onClick={this.toggleDisplay}>
                 Toggle Display 
           { this.state.display && <h1>Displayed!</h1> }

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:

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


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:


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: