Using && in JSX

JavaScript
1

Tell us what’s happening:
Describe your issue in detail here.
I am quite confused about the use of {} in JSX. We were told to put JavaScript expression in {} but now we are told that JSX can also be appeared inside {}, like: {condition &&

markup

}. However, I tried the example below and found that it is invalid for top tag, but why? So what exactly are the rules of using {} in JSX?

  **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(state => ({
    display: !state.display
  }));
}
render() {
  // Change code below this line
  return (
 {this.state.display &&
       <h1>Displayed!</h1>}
 
  );
}
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:90.0) Gecko/20100101 Firefox/90.0

Challenge: Use && for a More Concise Conditional

Link to the challenge:

2

Right, but the inclusion of a flag variable and a && is JS. It is just JS that will evaluate to JSX. If I have:

<div>
  {
    shouldShowGreeting && <p>Howdy</p>
  }
</div>

Then the “shouldShowGreeting &&” is clearly JS. It’s just that the second half is JSX. If shouldShowGreeting is truthy, then the expression will evaluate to the JSX. If shouldShowGreeting is falsy, then it will evaluate to that. React is smart enough to know to ignore things like false or null or undefined so nothing gets displayed. You have to worry about things like 0 though, so if I don’t know that it will be safe, I often throw a double bang (!!) on the flag to make sure. (Part of this is from my React Native background where some falsy values can cause crashes.)

Does that makes sense? Yeah, it is a little weird. And the whole && thing is odd on its own - it’s not really a logical AND in the traditional sense but is a weird kind of selector, always evaluating to one of its values.

3

Thank you very much for your reply. But my question is why can’t I put the {} a layer outwards, using your example, to:

{ shouldShowGreeting && <div>
  
    <p>Howdy</p>
  
</div>}
4

Sure, that could work, depending on your needs. Maybe I only want that div for that one situation. Or maybe there is other JSX there inside the div.

But your example is completely valid, it just depends on the situation. Of course, using the {} implies that there is surrounding JSX, but yeah, either example could work, just depending on what you want.

But yeah, the example I gave does look a little odd because why would you need that div if not showing the greeting. What about this example?

<div>
  {
    shouldShowGreeting && <p>Howdy</p>
  }

  <Notifications />

  { isLoggedIn ? <Logout /> : <Login /> }

  {
    isLoggedIn && <AccountInfo />
  }

  <Footer />
</div>
5

Suspect a little misunderstanding here - of course you can put the curly braces a layer outerwards, UNLESS that’s all your function returns.

This gives an error:

return {shouldShowGreeting && <p>Howdy</p>}

This is ok:

return <div>{shouldShowGreeting && <p>Howdy</p>}</div>
1 Like
6

Bingo, you got my meaning. Thank you.

I come up a plausible reason: the {} here is a JSX way of interpretation and we need to have the tag (here in your example, the outest <div> tag) to trigger this special mode of interpretation. Otherwise, the {} will be interpreted as the delimiter for a block or a class.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.