Conditional Rendering with Multiple Returns

What should a component return when the whole output depends on a condition, and not only one line of it? The && and ternary operators choose one piece inside the JSX. When the entire component looks different in each case, you can use an ordinary if statement and return different JSX from each branch.

Returning Early

A component is a JavaScript function, so it can have more than one return statement. The first return that runs ends the function, and its JSX is what React renders:

function WelcomeMessage() {
  const isLoggedIn = true;

  if (!isLoggedIn) {