It is a well known fact that React is perfect for building interactive user interfaces. Conditional rendering allows you to define what the application needs to look like based on a condition.
What you need to know
Before trying to master conditional rendering in React, you need to have solid knowledge of the fundamentals – HTML and CSS for structuring and styling the app, and JavaScript to implement dynamic features. You are going to need ternary operators a lot. So it would do you well to practice writing nested ternary operators with multiple conditions.
You also need to know how React works. Specifically the state, props, and how to embed dynamic expressions inside JSX. You will also benefit from understanding different lifecycle methods, as well as the useEffect method to achieve the same results.
Besides these features, you also need to understand foundational principles of React such as virtual DOM and why components render and re-render when they do.
What is conditional rendering?
Sometimes when building an app, you need to display certain elements or components if a condition is true, and other set of elements if the condition is false. That is the idea behind conditional rendering in React. Conditions usually depend on values from the state, which in turn can change based on user input. Often times user interactions will change current rendered status of elements.
You can also set inline styles based on state values, so user interactions will change appearance of elements as well. This guide explores how to set multiple classnames in React.
Why do you need conditional rendering
This is a very important feature for building dynamic UIs with React.
Conditional rendering allows you to define dynamic UI layout that changes in response to user events. This includes not only large elements, but also error messages and the like. For example, when you implement dynamic validation, you might need to display a custom message depending on the type of error that occurred.
Dynamic rendering means that you don’t overload the page with unnecessary components. This helps to not overwhelm users and keeps pages lightweight. So you only render the elements you need to. This is important to make sure the application runs smoothly and without delays.
Rendering based on a condition also helps you simplify the code. Using a ternary operator to output elements or components also makes code more readable. You can use data from props to conditionally render components, which gives you more flexibility for rendering (or not) components.
Two common ways to implement dynamic rendering in React
From if/else statements to switch, there are many ways to determine output of a JavaScript expression based on a condition. However, React’s templating language JSX only allows you to include only certain JavaScript expressions. React developers typically use ternary operators or logical AND operator to conditionally render components or elements inside JSX.
The syntax for ternary operator is simple:
Condition ? outcome 1 : outcome 2
First, you define a condition. Then follow it up with a question mark. After that, there are two values (or expressions) separated by semicolon. If the condition is true, ternary operators the first outcome. If it is not, the second one.
Experienced React developers sometimes nest another ternary operator in place of second outcome. So if the initial condition is false, ternary operator checks another condition. This is kind of similar to if/else syntax in React.
As for the AND logical operator, you probably know that in JavaScript, two values can be connected with a number of operators. AND logical operator ensures that the condition is true only if both conditions are met. At the same time, AND logical operator also runs all expressions connected to it.
That is, the AND logical operator checks if the first expression evaluates to true. The second expression only runs if the first evaluates to true. That is why logical AND operator is useful for conditional rendering in React.
Render based on route
In order to build a fully fledged web application, you need to render different pages for different URLs. As you know, React library is great for single page applications. But you can’t just display everything on screen all at once. Yes it is true that web apps are rendered in the browser, but users need to see different contents for different URLs. That’s where React Router comes in.
React router is the most popular library for routing and navigation in React. It allows you to define paths and components and elements to render for that path. The idea is pretty simple – wrap your entire application with a custom component, and then use custom components to define what gets rendered for that specific URL.
There’s much more you can do with react-router. From custom components to the ability to search query parameters. You can learn about advanced use cases it in official react-router documentation.
Since the very beginning, you can define optional param in react-router to render a specific component only for specific URLs. SimpleFrontEnd has good article about how to do this:
https://simplefrontend.com/optional-parameter-in-react-router/
Render for every item in the array
Finally, sometimes you need to dynamically render components or elements for every item in the array. And use data from the array to customize contents or styles of elements or components. You can easily do that using map() filter() and other advanced JavaScript methods in React.
React doesn’t require you to do JavaScript operations outside of UI. JSX allows you to mix UI with logic. You only need to wrap the entire expression with curly braces, and return an element for every item. Combined with the idea of reusable components, this facilitates rendering entire pages of UI in only few lines of code. That is why React so popular with front-end developers all around the world.
You can also render the same component multiple times. Simply use the fill() method to create array with specified number of items, and in the map() method return a static component.
Top comments (0)