Conditional rendering

Conditional rendering

Sometimes we want to evaluate a boolean value, and based upon it to decide if an element (or even a whole component) will be rendered. There are many ways to do that: Ternary operator, if else statements etc. In this case we will use the && operator that React provides in order to make decisions.

Syntax has to be inside { } as we saw any time we need to evaluate a JS expression inside JSX.

In the case above, the paragraph will be in the DOM only in case showParagraph evaluates to true (has a truthy value).