Set Up a Conditional Expression within a React Component's Render Function
Accessing the DOM directly to conditionally alter the view can be a pain! This guide covers the `render` lifecycle method and rendering the view via conditional expressions.
Oct 18, 2020 • 4 Minute Read
Introduction
The React framework is a view library for JavaScript that enables you to componentize your web app. React abstracts away much of the complexity of dealing directly with the browser's Document Object Model (DOM) so that you can focus more on the business problem at hand.
If you have tried to access the DOM directly in order to conditionally alter the view, you know how much of a pain it can be. Ignoring the conditional rendering of HTML is next to impossible. While using React (or any web framework for that matter), it is almost certain that you will need to conditionally render HTML depending upon the state your app is currently within.
Luckily for us, React provides a powerful means of conditionally rendering HTML inside of its components via the render lifecycle method. In this guide, you will learn about the render lifecycle method and how you can use the power of JSX to render your view via conditional expressions.
Let's dive in!
Render Function Overview
The render lifecycle method is the only method that is absolutely required within a React class component. This is because the whole point of a React component in the first place is to "render" HTML. This required function normally takes in a component's props and/or state and renders HTML that depends upon this data. The render function, working in combination with JSX expressions, provides a powerful and declarative means of expressing the view layer of your app. For more about JSX, and why you should use it with React, check out React's JSX documentation.
Normally, the use of a render function within a class component looks like this:
class PetList Extends React.Component {
...
render() {
return (
<ul>
{ this.props.cats.map(cat => {
return (<Cat name={cat.name} type={cat.type} />)
})}
</ul>
<ul>
{ this.props.dogs.map(dog => {
return (<Dog name={dog.name} type={dog.type} />)
})}
</ul>
)
}
}
The render function above is taking in a list of cats and dogs from a parent component and rendering an HTML unordered list for both. As you can see, the render function works with JSX to make the declaration of the HTML simple and dynamic. But what if you wanted to only show one of these lists depending upon a user's action? That's where the power of conditional expressions with JSX really shines.
Conditional Rendering
With JSX, conditional rendering is a breeze! The power of conditional rendering is made possible via JSX's flexibility in allowing you to assign HTML to JavaScript variables. Yes, that's right—love it or hate it, you can use HTML and JavaScript hand in hand. In the below code, you will see how conditional expressions can allow you to render either a pet list or a dog list depending upon the app state.
class PetList Extends React.Component {
...
render() {
const catList = this.props.cats.map(cat => <Cat name={cat.name} type={cat.type} />);
const dogList = this.props.dogs.map(dog => <Dog name={dog.name} type={dog.type} />);
const petList = this.props.isShowingDogList ? dogList : catList;
return (
<ul>{petList}</ul>
)
}
}
That was easy! The above render function renders either a list of Dog components or a list of Cat components depending upon the isShowingDogList Boolean prop. As you can see, via the power of the render lifecycle method and JSX, React allows you to easily declare the conditional state of your HTML.
Note: The code above is just a demonstration and could be optimized to call Array.map across either cats or dogs instead of always mapping across both arrays.
Conclusion
The render function of React components is a powerful lifecycle method. Apart from showing static HTML, the render function lets you dynamically render HTML that is based upon a conditional expression. There's so much more to the render function than just conditional expressions, too! For more information regarding this important and required lifecycle method, check out the React render documentation.