Developers love React because it allows us to build interactive web applications in short time. Personally, most important for me Is the ability to embed JavaScript expressions in JSX. It allows me to create dynamic layouts, style conditionally, and much more.
In this article, I want to show you how to use ternary operators and libraries to conditionally render elements in React.
Ternary operators to render conditionally in React
Unless you are new to JavaScript, you probably know what ternary operators are, and how to use them. If you don’t, let’s quickly recap:
Ternary operator is made of three parts: A condition, followed by question mark, followed by two options separated by a colon. If the condition is evaluated as true, then ternary operator returns the first specified value. If not, it returns the second value. The code looks something like this:
condition ? “Good” : “Bad”
Except you need to use curly braces to embed a ternary operator in JSX. So it would look something like this:
{ condition ? “Good” : “Bad”}
Great thing about JSX is that it allows you to use the elements you know from HTML, but also add dynamic features to your apps.
Using Ternary operators to render dynamically
When you use JSX, components are rendered when you invoke a tag for that component in your JSX code.
If you invoke the component, React will render that component.
To render conditionally, simply add a ternary operator that invokes a certain component if the condition is true. And if the condition is false, return null, which will render nothing. Or you can render another component.
You can also use map() method to render conditionally, or to render the same component multiple times. Here's how to do that in React.
Libraries for dynamic rendering in React
Now, let’s explore some libraries that allow you to do conditional rendering in React.
First, we have to start with react-router. It is the primary tool for implementing navigation in React. You can also use react-router to conditionally render components depending on current URL in the browser. If the URL matches a certain pattern, then react-router will show corresponding components for that URL.
Next, loadable components. This library is optimized for dynamic and conditional rendering. Components will render (and not render) depending on whether certain conditions are met. You can use the library for code splitting and implement UX friendly features like lazy loading. As a result, your React web app is going to run faster and have smooth transitions.
React Loadable is another similar library. It approaches dynamic rendering a little differently. It provides a HOC you can wrap around components that you want to render dynamically.
Finally, there is react-async for doing asynchronous rendering in React. You can dynamically render components based on status of fetched data. In other words, components that require external data will only render once your app loads necessary data from external source.
Render components based on external data
When building web apps, we often need to render components based on data we import from external source. Usually data comes from the API. You can use the useEffect() hook to store the fetched data in the state and use methods like map() and filter() to render components for every item in the array.
In the map() function, you can pass data from every array item to the newly generated components. As a result, dynamically generated components and elements will have different contents, styles, and so on.
Top comments (0)