FAQ: Advanced JSX - JSX Conditionals: &&

#1

This community-built FAQ covers the “JSX Conditionals: &&” exercise from the lesson “Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise JSX Conditionals: &&

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

#2

I am confused with the && operator in JSX.

#3

What part of it are you confused by?

I think it’s something like

x && <jsx></jsx>

if x evaluates to true, the JSX element will render. If it evaluates to false, nothing renders

#4

@javaslayer94101, thank you very much, that’s what I am confused.

Here is what I am thinking, the code below will evaluate to true or false. Why the <jsx></jsx> element is render when x is true.

x && <jsx></jsx>

I will spend more time to be comfortable with this coding style. I think I lack some basic knowledge about JavaScript.

Have a good day.

#5

… Your example has { !baby && <li>Pizza</li> }

But it marks it as a fail if you put { !judgmental &&

  • Nacho Cheez Straight Out The Jar
  • }

    Am I missing something? Your answer is the exact same thing except without the spaces between the curlys and the contents???

    1 Like
    #6

    No you’re not. Getting the same error. Unfortunately the React course is PACKED with these “bugs”. They only accept the answer if it’s matches their’s to the dot.

    1 Like