Don't use '&&' for conditional reasoning

We often use '&&' to display a component if a given condition is true and to not display it when the condition is false.

function BigComponent({condition}) {
    return (
        <div>
          <p> After this we will try to render a component based 
             on a condition 
          </p>
          {condition && <NextComponent/>}
        </div>
    )
}

export default BigComponent

So basically, here the condition is evaluated and only if the left side of '&&' is true, we move forward and then render the second half, that is the component.

This is called short circuiting.

There are two problems here:

1. The output to the condition must be boolean. If the condition gives 0, it will render 0.

2. If the result from the condition is undefined, it will give an error.

What to do then?

To avoid something like displaying a zero or getting an 🔴error🔴, we can use a ternary operator:

condition ? <ConditionalComponent /> : null

which translates to: "if condition is true do the first statement else execute the statement after the colon (:)"

Happy Coding!👩‍💻

Comments

[Rense Bakker]

Interesting argument. However, I would argue that if your conditional flag could be anything other than a boolean you shouldn't use it as a flag though... if it can be 0 than your condition should be myFlag !== 0 && <Component />.

Ps: thats a colon, semicolon is this one ; 😉

[Aishanii]

Thanks for pointing the typo out!

Here, I have talked about specific use case where we can get a numerical value signifying a Boolean like 0 which is taken for false but would cause an issue while rendering. A flag always works in the case you mentioned.

[Alain D'Ettorre]

What about {!!condition && <NextComponent/>} and call it a day?

[Aishanii]

That would be just to 'make it work' I suppose. Want to discuss best practices here