When working with React, you will encounter situations where you want to render some JSX only when a particular condition is true. In all other cases, you do not need to render anything. In such situations, the logical AND (&&) operator comes in handy.
Hence, we can update the example from the previous chapter using the && operator like this:
In the above example, a ⭐️ is rendered next to the name of the book when the isFavorite prop is truthy. When the value of isFavorite is falsy, the expression isFavorite && "⭐️" returns the falsy value contained in the isFavorite prop. Since, JSX does not render null, undefined, and boolean values, the rendered output will only contain the name of the book.
Points to keep in mind while using the && operator in React:
Short circuiting: The && operator will return falsy value as soon as it encounters any falsy value. If all the values are truthy, then it will return the last value. Consider the following:
Avoid putting numbers on the left-hand side of &&: Unlike any other falsy values, React renders 0 (zero) to the DOM. So, in JSX, it is not advised to put numbers on the left-hand side of &&.
To avoid this issue, make sure to use comparison operators (>, <, ===, etc.) or double negation (!!) on the left-hand side. This will ensure that the expression is evaluated as a boolean when LHS is falsy.
Note that this caveat only lies with numbers. The && operator behaves as expected when used with all other kinds of values including objects and arrays. Objects and arrays are considered truthy, therefore, using the && operator with objects and arrays is safe and will not cause any unexpected behaviour.