Rendering based on
It's common for a component to return completely different types of React elements based on its
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.
We can actually return more than just React Elements from a component function. Valid values:
- A React Element
undefinedto render nothing
- An array of any of these
- Some more obscure things (e.g. Portals)
If you're using TypeScript, the TypeScript type
React.ReactNodeincludes all of these.
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
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 === undefinedto check for that case.
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
error props exist.
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.
Want to learn React Native in-depth?