Understand “&&” Conditional Rendering in React with Coding Experiments
Tags: webdev, react, beginners, javascript
Published: 2022-12-20 07:10:03



This is my memo of how conditional rendering with the `&&` operator behaves in React, along with some coding experiments I carried out to determine when to use it and when not to.
```javascript
    // an example of Conditional Rendering with &&
    {condition && <p>Hello World!</p>}
```
## Understand Logical AND (`&&`) behaviour

Conditional rendering with the `&&` operator makes use of JavaScript's logical AND behaviour, so it is essential to understand this operator if you want to fully understand that expression.

The following is an explanation from from the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND).
>  The logical AND (`&&`) (logical conjunction) operator for a set of boolean operands will be `true` if and only if all the operands are `true`. Otherwise it will be `false`.
```javascript
    true && true // true
    true && false // false
    false && true // false
    false && false // false
```
However, we can use the `&&` operator with different types of values, which can be useful but can also be tricky to work with.
>  More generally, the operator returns the value of the first [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy) operand encountered when evaluating from left to right, or the value of the last operand if they are all [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).

Here are some examples.
```javascript
    // reurun first falsy operand
    0 && "Hello" // 0
    false && "Hello" // false
    
    1 && false // false
    1 && "Hello" && 0 // 0
    
    // return the last operand if they are all truthy
    1 && "Hello" // Hello
    true && "Hello" // Hello
```
## Understand “&&” Conditional Rendering in React

There is another factor that is important to understand when it comes to Conditional Rendering: [Booleans, Null, and Undefined are ignored](https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored) in React.
>  `false`, `null`, `undefined`, and `true` are valid children. They simply don’t render. These JSX expressions will all render to the same thing:
```javascript
    <div />
    
    <div></div>
    
    <div>{false}</div>
    
    <div>{null}</div>
    
    <div>{undefined}</div>
    
    <div>{true}</div>
    
    ref: https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
```
By combining these factors, we can use conditional rendering with boolean values.
```javascript
    <div>
    {false && <p>this doesn't render</p>} //false
    </div>
```
In this example, the `&&` operator follows the logical AND rule, so the result inside of `{}` is `false`. This means that `<div></div>` will be rendered in accordance with the React specification. Logically, the same thing happens when using `undefined` or `null`.

The actual problem occurs when using other falsy values like `0` and `NaN`. In these cases, the `&&` operator will return `0` or `NaN` respectively, and the element will be rendered in the DOM, which can lead to unexpected results.
```javascript
    // how we write
    <div>
    {0 && <p>this doesn't render</p>}
    </div>
    
    // What we see
    <div>0</div>
    
    /* the same happens with NaN*/
    // how we write
    <div>
    {NaN && <p>this doesn't render</p>}
    </div>
    
    // What we see
    <div>NaN</div>
```
## Conclusion

It is better to always use boolean values before the `&&` operator for conditional rendering as the official React documentation recommends. However, it is also important to be aware of some of the falsy values that can cause unexpected results when used with the `&&` operator.

Thank you for reading :)

whole code is available here ([JavaScript](https://codesandbox.io/s/bold-dream-u9ms70?file=/src/App.js), [TypeScript](https://codesandbox.io/s/frosty-thunder-92rcrj?file=/src/App.tsx))

the original article is [here](https://medium.com/@lada496/understand-conditional-rendering-in-react-with-coding-experiments-c2b9e0de7ecb)