Conditional rendering

Not every book in your list should look the same. A book you've finished should say "Done", a book you're reading should say "Reading", and a rating should only appear if you've actually rated the book.

In React there is no special template language for this. You use the JavaScript you already know: if, the ternary operator and &&. This lesson shows where each one fits.

Using if to return different JSXCopy Anchor Link

A component is a function, so it can run an if statement before it returns. Here StatusBadge returns a different <span> depending on its status prop:

Each return ends the function, so only one branch ever runs. Use this style when the branches return quite different JSX, or when the logic is long enough that cramming it inside JSX would be hard to read.

Rendering nothing with nullCopy Anchor Link

Sometimes the right answer is "show nothing at all". A component can return null to render nothing:

function RatingLine({ rating }) {
  if (rating === undefined) {
    return null;
  }
  return <p>Rated {rating} out of 5</p>;
}

React treats null, undefined, false and true as "render nothing". That is what makes the shortcuts in the next section work.

Conditions inside JSXCopy Anchor Link

An if statement can't go inside JSX, because JSX curly braces only accept expressions: pieces of code that produce a value. JavaScript has two expression-shaped tools for conditions.

The ternary operator: this or thatCopy Anchor Link

condition ? a : b means "if condition is true, use a, otherwise use b". It is handy when only a small part of the JSX changes:

<p>{book.status === 'done' ? 'Finished it!' : 'Not finished yet'}</p>

The && operator: this or nothingCopy Anchor Link

condition && a means "if condition is true, use a, otherwise render nothing". Use it when there is no "else" branch:

{book.rating !== undefined && <p>Rated {book.rating} out of 5</p>}

Here are both in one component. Edit the books data to see the output change:

Try giving Dune a rating: 4, or changing The Hobbit's status to 'want'.

Storing JSX in a variableCopy Anchor Link

When a condition gets more complex, nested ternaries become hard to read. A tidy alternative is to work out the JSX in a variable first, using ordinary if statements, and then drop the variable into your JSX:

function BookCard({ book }) {
  let note = null;
  if (book.status === 'done' && book.rating >= 4) {
    note = <p className="note">A favorite!</p>;
  } else if (book.status === 'reading') {
    note = <p className="note">Keep going.</p>;
  }

  return (
    <article>
      <h2>{book.title}</h2>
      {note}
    </article>
  );
}

Another common trick is a lookup object. Instead of an if for every case, you map each possible value to what you want to show:

const statusLabels = {
  want: 'Want to read',
  reading: 'Reading',
  done: 'Done',
};

<span>{statusLabels[book.status]}</span>

The Reading List will use this pattern for its status badge.