Il rendering condizionale consente di mostrare o nascondere elementi in modo dinamico in base a determinate condizioni, aumentando la flessibilità dei componenti React. Questa sezione esplorerà due tecniche standard di rendering condizionale: l'operatore && e l'operatore ternario.

Rendering condizionale con l'operatore &&

Sintassi

L'operatore && in React viene utilizzato per il rendering condizionale e funziona in modo simile a un'istruzione if in JavaScript. Consente di visualizzare elementi in base a condizioni specifiche.

condition && (<p>element</p>)

Questa tecnica viene spesso impiegata quando si desidera mostrare un elemento solo se una determinata condizione risulta vera.

Esempio

Consideriamo un esempio in cui vogliamo notificare agli studenti che hanno superato un esame. Se il punteggio di uno studente supera i 60 punti, verrà visualizzato un messaggio di successo con il suo nome e il punteggio.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

Il componente Notification esegue il rendering condizionale di un elemento paragrafo <p> in base al valore della prop mark.

Codice completo dell'app

Il punteggio di Emily non viene mostrato perché è inferiore a 60pts.

Rendering Condizionale con l'Operatore Ternario

Sintassi

Il rendering condizionale tramite l'operatore ternario (? ... : ...) è un'altra tecnica potente. Offre un modo conciso per rendere elementi in base a condizioni.

condition ? (true_element) : (false_element)

Questo approccio è adatto quando si deve scegliere tra due elementi distinti in base a una condizione.

Esempio

Considera uno scenario in cui si desidera salutare gli utenti in modo diverso in base al loro stato di accesso. Il componente Greeting dimostra il rendering condizionale con l'operatore ternario.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

In questo esempio, il componente Greeting saluta gli utenti in modo diverso in base al valore della prop loggedIn.

Codice completo dell'app

Nota

Sebbene entrambe le tecniche consentano il rendering condizionale, è fondamentale comprenderne le differenze. L'operatore && è ideale quando si desidera visualizzare un elemento solo se una specifica condizione è soddisfatta. Al contrario, l'operatore ternario è adatto nei casi in cui è necessario scegliere tra due elementi distinti in base a una condizione.