Conditional Rendering

JSX has no if directive. Conditional rendering is just JavaScript expressions.

Ternary

The workhorse for “show A or B”:

<button disabled={loading}>
  {loading ? 'Saving…' : 'Save'}
</button>

For “show A or nothing”:

{error && <p className="error">{error}</p>}

Watch out: if the left side can be 0, it’ll render the 0. Coerce to boolean:

{Boolean(items.length) && <p>{items.length} items</p>}

…or use a ternary returning null:

{items.length > 0 ? <p>{items.length} items</p> : null}

When the branches are large, an early return is more readable than a ternary:

function Profile({ user }) {
  if (!user) return <Loading />;
  return <UserCard user={user} />;
}