Conditional Rendering

We can render components based on condition(s) using if-else statements or ternary operators.

For example, we can display different messages based on a variable. Consider, for example, we have a component that displays different UI based on the state of the loggedin state:

We can pass the loggedin value as false:

Note that we also enclose Boolean values in braces {}. The output should be something like this:

Now if we pass the value true into the component, the output will change:

This time, we also passed the value "username" since I was required in the else block. This way, conditionals can be used to do simple and complex tasks.

It is up to you how you use it!