Conditional Rendering In React

Conditional Rendering In React

Now we’re going to learn about how to do conditional rendering in React. In other words if one condition exists, then we render a specific piece of information. If a different condition exists, then we would render a different piece of information to the browser. Well, React is not a templating language so we do not have access to html based if or else directives. No problem, we just move that logic to plain JavaScript. Let’s see how to do that now.

Conditionally Render A List

What we can do is start out with the list rendering example we just worked on. It’s just a simple array with three items, and then use of the map function to render them all out in the JSX markup.

simple react list
The above code works great, but what happens if there are no items in the array? In a situation like that, it might be nice to display a message like, “No items available”, or something similar. So based on the condition of there being one or more items in the array, then we display the list, otherwise if there are no items in the array we should say so on the screen. Here is an example of how we might do that in React.

Using A Helper Method

Let’s add a helper method to the component that will help with this task. First let’s just get the structure of this method down. It’s going to look a bit like the following.

What we are doing is to first check if the listitems array has any items in it. If it has not items, we will display that empty list message. If it does have items, then we need to display them.

Returning JSX from a function

In either of the conditions, we need to return some JSX which can be used in our React.Fragment tag. So this is the markup that should work. In the first case we return a JSX expression which is a Bootstrap alert. In the other case, we just move the logic for rendering a list into this function, and return it.

Calling A Function In JSX

Now that we have moved the JSX into a function which will decide how to render the list, we need to include a call to that function. We make the call to our new function inside the render() function of the component like so.

Testing The Conditional Render

So if we put it all together, we can see how this works. First, we’ll populate our listitems array with four individual list items.

In this scenario, the list is being rendered with 4 items in it. Perfect.
react conditional rendering of list

Now, let’s empty out the array. We need to see if the logic in the renderItems() function is working correctly.

It looks like we are now getting the empty list message which is exactly what we want.
react if else rendering

Conditional Rendering In React Summary

This is just one example of how you might tackle conditional rendering when using React. Again, since there are no custom directives like ng-if or v-if, we need to fall back on native JavaScript to implement the logic on whether to render one piece of information or another. If nothing else, we’ll be improving our native JavaScript chops using this technique!