Un'operazione molto comune durante la renderizzazione di un componente è quella di mostrare o meno certe informazioni. Ad esempio, se un utente è loggato possiamo mostrare il suo nome e mostrare un link al login in caso contrario. JSX supporta il rendering condizionale sfruttando la normale sintassi JavaScript, facendo quindi uso sia dell'istruzione if che dell'operatore ternario. I prossimi esempi producono lo stesso risultato.

function showUser(props) {
  if (props.isLoggedIn) {
    return <div>{props.name}</div>;
  }
  return <a href="login">Login</a>;
}

function showUser(props) {
  return (
    props.isLoggedIn ? <div>{props.name}</div> : <a href="login">Login</a>
  );
}