React Express

Conditional Rendering
Conditional Rendering
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.
Rendering with &&
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 h2 component.
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 false..
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.
Rendering with if/else
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 loading and 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.