It's common for a component to render different kinds of content based on its
props. React is extremely flexible - you may return entirely different content each time the render function is called. The only requirement is that the render function returns a React node - this can be a React Element, a string, null, or an array of any of these.
Let's look at one of the most common cases: conditionally rendering a React element based on whether a specific
prop exists or not.
In this example, we'll render a Card component that takes a
title prop and optionally a
subtitle prop. We only want to render a
h2 for the subtitle if it exists.
For simple conditional rendering, we take advantage of the short-circuit evaluation of
&&. If the left-hand side of the
&& is falsy, the expression evaluates to the left hand side. Otherwise, the expression evaluates to the right-hand side.
In the example, when
subtitle is not passed in, the prop is
undefined, so the expression evaluates to the left-hand side (
undefined). When React sees an
undefined value, nothing will be rendered. When we do pass a
subtitle prop, the left-hand side is truthy, so the expression evaluates to the right-hand side-in this case, our
Note that an empty string
"" is falsy, but the expression will still evaluate to a string (not the boolean
false). If the parent component renders empty string children, this can affect rendering. So you may want to doubly negate the prop (i.e. convert to boolean) with
(!!subtitle && ...) if you need the value
You may also notice that the styles are defined below where they are used in the component
render functions. This pattern is fairly common. Styles are often secondary to the component logic, so we want our logic to come first in the file. This technique works because the
styles variable declaration is hoisted to the top of the file, and we assign a value to
styles before the render functions are ever called.
Rendering with ternary
Let's look at another common case: rendering a different React element for when a
prop exists and when it doesn't. We can accomplish this easily with the ternary operator. It's common to render defaults this way.
For more complex cases, we can introduce variables to temporarily reference React elements, letting us combine them in different ways. We may also use class methods for rendering different content.
Let's take a look at an example where the rendering is substantially different based on whether or not the
error props exists.
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.