A renderização condicional em React permite que você crie interfaces de usuário dinâmicas. É usado para mostrar conteúdo diferente com base em certas condições ou estados dentro da sua aplicação. As abordagens mais comuns para usar renderização condicional incluem usar declarações if, o operador ternário (?:) e o operador lógico AND (&&). A forma mais simples de renderização condicional usa uma declaração if. Aqui está um exemplo:

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign in</h1>;
}

Neste exemplo, o componente Greeting verifica a prop isLoggedIn. Se for true, ele retorna uma mensagem de boas-vindas, caso contrário, solicita que o usuário faça login. Aqui está um exemplo usando o componente Greeting dentro do componente pai App:

function App() {
  return (
    <div className="App">
      <Greeting isLoggedIn={false} />
    </div>
  );
}

Para condições mais simples, o operador ternário (?:) é frequentemente usado diretamente dentro do JSX. Ele permite renderização condicional inline, o que pode tornar seu código mais conciso:

function Greeting({ isLoggedIn }) {
  return <h1>{isLoggedIn ? "Welcome back!" : "Please sign in."}</h1>;
}

Este código alcança o mesmo resultado do exemplo anterior mas de uma forma mais compacta. O operador ternário verifica isLoggedIn e exibe a mensagem apropriada. Outro padrão comum para renderização condicional é usar o operador lógico AND (&&). Isto é particularmente útil quando você quer renderizar algo, ou nada, baseado em uma condição:

function Notification({ message }) {
  return (
    <div>
      {message && <p>{message}</p>}
    </div>
  );
}

Neste exemplo, o elemento de parágrafo com a mensagem é renderizado apenas se a prop message for verdadeira. Se message for falsy - ou seja, uma string vazia, null ou undefined, nada será renderizado na tela. Dominando essas técnicas de renderização condicional, você pode criar aplicações mais interativas e amigáveis ao usuário que se adaptam a dados e interações do usuário em constante mudança.