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.

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!