Conditional Rendering

Rendering based on props

It's common for a component to return completely different types of React elements based on its props.

React is extremely flexible in this regard — we can return an entirely different element tree each time the component function is called.

In other words, to show or hide a component, we either do or don't include it in the element tree.

React Nodes

We can actually return more than just React Elements from a component function. Valid values:

• A React Element
• false, null, or undefined to render nothing
• An array of any of these
• Some more obscure things (e.g. Portals)

If you're using TypeScript, the TypeScript type React.ReactNode includes all of these.

Rendering with &&

One of the most common cases: conditionally rendering a React element based on whether a specific prop is true or not. In this example, we'll render a Card component that takes a title prop and optionally a showButton prop. We only want to render a Button for the subtitle if it exists.

The same technique works with || too.

Rendering with ternary ?

Another common case: rendering a different React element for when a prop exists and when it doesn't. We can accomplish this with the ternary operator.

Note that a buttonTitle equal to the empty string, "", won't render, since the empty string is a falsy value. If we did want it to, we could use buttonTitle === undefined to check for that case.

Rendering with if/else

For more complex rendering, we can introduce variables to store our React elements, letting us combine them in different ways. Let's take a look at an example where the rendering is substantially different based on whether or not the loading and error props exist.

Managing complexity

Rendering in React is powerful because the logic can be as simple or complex as we need it to be.

However, as rendering complexity grows, the code can start to become unmanageable.

Consider breaking down complex components into smaller, simpler ones for a more maintainable code base.