Inversão para condições abreviadas em JSX

Pode haver uma situação inversa: é necessário inserir texto se a condição for falsa e não fazer nada se for verdadeira. Para isso, é necessário inverter a constante usando o operador !.

No próximo exemplo, se hide for false, um parágrafo com o texto será inserido:

jsxfunction App() {
  const hide = false;
  
  return <div>
    {!hide && <p>text</p>}
  </div>;
}

jsxfunction App() {
  const isAuth = false;
  
  return <div>
    <p>por favor, faça login</p>
  </div>;
}