React is the perfect tool for building interactive web applications. Every component has an internal state, which we can use to conditionally style and render components.
Conditional rendering is a very important feature in React. Often times we want certain React elements to be conditionally rendered. In other words, if a certain state value is true, then an element (or component) should be added to the DOM. If not, that element will be absent.
In this article, I will show you how to implement conditional rendering in React.
First thing first, let’s talk about JSX. It is a templating language for React. JSX looks a lot like normal HTML but looks can be deceiving. It is actually entirely JavaScript. However, its HTML-like syntax is a big plus for anyone who’s new to React.
JSX has one great feature: it allows you to embed JavaScript expression within the layout of the component. You can use something like a ternary operator, or even a JavaScript function to set up a condition and render components based on the outcome of that condition.
Let’s talk about conditions for one second. State is one of the integral features of React. It represents the most recent ‘state’ of the component. That probably doesn’t sound very clear. For example, if a web application has a toggle to switch between dark and light modes, it probably has a Boolean state value to represent the current state. Is the toggle turned on? Or is it turned off? Inputs are usually tied to the state. So user activities can change the state.
When setting conditions in React, we usually look at state values. For example, we might want to render something whenever the user clicks a button. To do that, we set up an event handler for the click event to set the state variable to true. So clicking the button will set the state variable to true.
Inside JSX, we can implement a ternary operator that checks state variables. The code looks something like this:
{ clicked ? <Component/> : null }
As you can see, first we write a condition. In this case, we reference the Boolean state value named clicked. The condition can be anything else, for example:
{ 2+2=4 ? <Component> : null }
So you’re free to set up complex conditions.
After the condition, we write what we want the ternary operator to return if the condition is true. In this case, it will return <Component>. Next, we write the value to return if the condition is false. Two values are separated by a semicolon.
In the example above, the ternary operator will return null if the condition is false. You can also set it up so that the ternary operator returns one component or the other, depending on the outcome of the condition.
<clicked ? <Detailed/> : <Generic/>
Using a ternary operator is by far the easiest way to conditionally render components in React. Fortunately, JSX allows you to embed these directly into the component’s layout structure.
Alternatively, you could also write a function that returns a component depending on the outcome of a condition. If the condition is very complex, this might be a preferable approach.
SimpleFrontEnd has excellent React guides. For example, I really liked the guide on how to render multiple components.