FAQ: Advanced JSX - JSX Conditionals: &&

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!

I am confused with the && operator in JSX.

4 Likes

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

1 Like

@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.

1 Like

… 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

    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.

    3 Likes

    Typo

    !judgmental should be written as judgemental.

    8 Likes

    @ leiguoyang

    The idea of using a conjunction in this way, without explanation is confusing. I’m right there with you.

    Consider a simpler case with conditional evaluations.

    if(a && b) {
       //do a thing
    }
    

    Programming languages optimize the evaluation of this conditional by skipping the ‘b’ if we know ‘a’ evaluates to false. It’s a short cut, an example of short-circuit evaluation.

    Consider what would happen if ‘b’ was is a function that, when evaluated, did some stuff unrelated to returning a boolean value. That’s what I suspect is happening here. If ‘a’ is false, that unrelated stuff wouldn’t happen.

    This is also why the thing needing to be evaluated needs to be on the left as the conditional is read from left to right. Using your example

    x && <jsx></jsx>
    

    works, but in the case below the jsx div will always be rendered

    <jsx></jsx> && x
    

    I hope this helps someone as confused as I was.

    4 Likes

    Good point(s).

    1. it’s mispelled

    2. It doesn’t make any sense to negate judgmental as !judgmental if there’s a 50 - 50 chance

    1 Like

    lifesaver! thx I didn’t realize codeCademy spelled it judgmental lol til now

    Nope, judgmental is the US spelling. If you’re okay with “color”, you’re okay with “judgmental”. In any case, it is not a misspelling nor a typo.

    2 Likes

    The && operator is logical and in JavaScript, right? How does it also function as an “if and only if” in JSX, especially since it is wrapped in curly braces (marking it as regular JS?)?

    I have never read about this use in plain JS. Did I skip over something while reading?

    Wait, I think I’m starting to understand this. It has something to do with the values of the expressions. I think JavaScript’s logical operators might work at least something like Python’s. Don’t know if there’s a technical name for this, but here goes.

    Logical And:
    If the left expression is ‘truthy’, we just get the right side’s value. This makes sense.
    True and true would give us true, since that’s what the right expression’s value was.
    True and false would give us false for the same reason.
    However, we can reuse this to our advantage. If we keep the left side as a boolean, then it acts sort of like a conditional whether or not to evaluate to the right side’s value.

    But if the left expression is ‘falsy’, we get it. There’s no need to evaluate the right hand side. However, it doesn’t necessarily evaluate to false, just what the falsy value was.
    False ad false would give us false.
    False and true would still give us false.
    0 and true would give us 0.
    0 and false would still give us 0.
    “” and ‘’ would result in “”.

    I think the thing that’s a little weird is that the expression will evaluate to the value of the boolean (left side) if the boolean (again, the left side expression) is falsy. If I remember right, JSX only renders JSX elements, so the value is still there, we just never see it.

    So that just answered my question about && and honestly I have to say it’s pretty cool but can end up being very confusing. I’m going to investigate || now.

    Logical Or:
    If the left side is true, we don’t need to check the right hand side (this is the flip case of &&), so we just get the left side’s value. This makes a lot of sense.
    True or false should always give us true.
    True or true should result in the same thing.

    If the left expression is false, we get the right expression. This also makes sense.
    False or true should give us true.
    False or false would give us false. It works how you’d expect it to.

    This (meaning the logical or trick) doesn’t seem as useful though. I guess you could make it a falsy checker? For example if you had a value x,
    x || "Your value is falsy."
    should work perfectly as a falsy value finder - as long as you have a human reading it.
    I suppose you could also use:
    !!x || "Your value is falsy."
    This would get very confusing as if x is truthy you get true, but if it’s falsy you don’t get false but instead a string.
    If you want to boolean-ify a value, check the logical not section.

    Logical Not:
    Well, there aren’t really any tricks here. It just makes a value become either true or false in both languages. If you want to check if it’s truthy or falsy, !!x will give you true if x is truthy and false otherwise.

    Logical XOR:
    The best way I’ve seen of implementing this is x ? !y : y which works very well for booleans.
    True XOR false would give us not false: true.
    True XOR true would give us not true: false.
    False XOR false would give us false.
    False XOR true would give us true.

    Hmm, wait - after messing around in the console for a bit, I believe that the most useful use for this is just the opposite of logical and - an “unless” of sorts. The left side would be a boolean. If it ends up being false, the ternary operator will give us the value of the right side. However, it gets a bit messy. Let’s say you had:
    (expression that is true) XOR 0
    which would give us !0 - true. That’s kinda weird. And if we implemented something like this for JSX elements, it would probably give us false most of the time. Still, it wouldn’t render anything, and we’d be fine.

    That pretty much wraps up my analysis. Very interesting use JavaScript logical operators. If this is something people actually use (not going to call it an “exploit”, because it really isn’t), then why wasn’t it explicitly stated in the JS course?

    We’re taught what the logical operators theoretically do, but the actual way they execute varies from language to language and I think this should be taught so programmers can know what tools they could technically use in each situation.

    1 Like

    For your second point, it makes sense from a readability/comprehension standpoint. “I will only show this if he’s not judgemental”. I agree with the spelling… North Americans are weird

    Still, it is returning error

    This is valuable for understanding and should definetly be on the lesson!

    Thanks!

    This is a very good analysis of why this syntax works, and something that should be taught in the lessons IMO

    For those coming from statically typed languages, a non-empty string is a “truthy” value, and so the right side of the && operator is always true. This is why you can use the left side’s truth value to determine whether the right side is rendered. It is an interesting shortcut on JavaScript’s part, but it kind of hurts at the same time. I feel like I am betraying logic lol.

    I was confused with the && operator in JSX as well.

    The article of MDN about the Logical && Operator helped me only partially.

    The explanation of Flanagan in “Javascript: the Definitive Guide” 7.th edition (pg. 84-85) helped me a lot.

    Summarizing - as far I understood - it is important to grasp that the && operator returns always the value of their operands, even if it’s not “true” or “false”. If the values of the operands are “true” or “false” like in the expression ‘a > 5 && a > 20’ then the value will of the whole expression will be true or false. Cause in this case is the ‘>’ operator that returns true or false.

    Otherwise the && operator will return the value of one of the two operands following a so called short circuit evaluation:

    • If the first (the left one) operand is falsy then the second one will not be evaluate (cause the whole expression will be falsy anyway) and the value of the first operand is returned.

    • If the first operand is truthy then the truthiness value of the whole expression depends on the value of the second operand and the value of the second operand is returned.

    const tasty = (
      <ul>
        <li>Applesauce</li>
        { !baby && <li>Pizza</li> }
        { age > 15 && <li>Brussels Sprouts</li> }
        { age > 20 && <li>Oysters</li> }
        { age > 25 && <li>Grappa</li> }
      </ul>
    );
    

    In this snippet if !baby evaluates to falsy (being baby truthy) then the value of baby is returned and not being this a JSX element nothing changes otherwise the whole expression while take the value of

  • Pizza
  • , that’s the value of the second element.

    Maybe @mtf can check if what I wrote make sense. Thanks!

    1 Like

    I am actually stumped on const judgmental = Math.random() < 0.5;

    How does this line of code actually evaluate to true or false when the value is a number?