Conditional Rendering
In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if
or the conditional operator to create elements representing the current state, and let React update the UI to match them.
Consider these two components:
We'll create a Greeting
component that displays either of these components depending on whether a user is logged in:
This example renders a different greeting depending on the value of isLoggedIn
prop.
Element Variables
You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
Consider these two new components representing Logout and Login buttons:
In the example below, we will create a stateful component called LoginControl
.
It will render either <LoginButton />
or <LogoutButton />
depending on its current state. It will also render a <Greeting />
from the previous example:
While declaring a variable and using an if
statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
Inline If with Logical && Operator
You may embed expressions in JSX by wrapping them in curly braces. This includes the JavaScript logical &&
operator. It can be handy for conditionally including an element:
It works because in JavaScript, true && expression
always evaluates to expression
, and false && expression
always evaluates to false
.
Therefore, if the condition is true
, the element right after &&
will appear in the output. If it is false
, React will ignore and skip it.
Note that returning a falsy expression will still cause the element after &&
to be skipped but will return the falsy expression. In the example below, <div>0</div>
will be returned by the render method.
Inline If-Else with Conditional Operator
Another method for conditionally rendering elements inline is to use the JavaScript conditional operator condition ? true : false
.
In the example below, we use it to conditionally render a small block of text.
It can also be used for larger expressions although it is less obvious what's going on:
Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to extract a component.
Preventing Component from Rendering
In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return null
instead of its render output.
In the example below, the <WarningBanner />
is rendered depending on the value of the prop called warn
. If the value of the prop is false
, then the component does not render:
Returning null
from a component's render
method does not affect the firing of the component's lifecycle methods. For instance componentDidUpdate
will still be called.
Last updated