Come rendere un componente in base a una condizione…

Di solito si utilizzano i seguenti approcci:

Render condizionale con operatore ternario o if: Il metodo più semplice.

// Esempio con operatore ternario in React
function MioComponente({ èLoggato }) {
  return (
    <div>
      {èLoggato ? (
        <p>Ciao, utente!</p>
      ) : (
        <button>Accedi</button>
      )}
    </div>
  );
}

// Esempio con if all’interno di un componente funzionale
function AltroComponente({ inCaricamento }) {
  if (inCaricamento) {
    return <p>Caricamento in corso...</p>;
  }
  return <h1>Dati caricati!</h1>;
}

Operatore logico AND (&&): Utile quando si desidera mostrare un componente solo se la condizione è vera.

// Esempio con && in React
function Messaggi({ count }) {
  return (
    <div>
      {count > 0 && <p>Hai {count} nuovi messaggi.</p>}
    </div>
  );
}

Utilizzo di funzioni e componenti figli: Permette di estrarre la logica di rendering in funzioni o componenti separati per una migliore leggibilità e riutilizzo.

// Esempio con funzione in React
function renderContenuto(ruoloUtente) {
  if (ruoloUtente === 'admin') {
    return <PannelloAdmin />;
  } else if (ruoloUtente === 'utente') {
    return <ProfiloUtente />;
  }
  return <PaginaLogin />;
}

function App({ ruoloUtente }) {
  return (
    <div>
      {renderContenuto(ruoloUtente)}
    </div>
  );
}

Array e metodo map: Per visualizzare una lista di componenti in base ai dati.

// Esempio con map in React
function ListaElementi({ elementi }) {
  return (
    <ul>
      {elementi.map(elemento => (
        <li key={elemento.id}>{elemento.nome}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Nasconde o mostra un elemento, ma il componente viene comunque renderizzato. Adatto per casi semplici in cui lo stato non influisce sulla struttura del DOM.

/* Esempio CSS */
.nascosto {
  display: none;
}

// Esempio di applicazione di classe CSS in React
function ContenutoToggle({ èVisibile }) {
  return (
    <div className={èVisibile ? '' : 'nascosto'}>
      <p>Questo contenuto viene nascosto.</p>
    </div>
  );
}

La scelta del metodo dipende dalla complessità della condizione e dalla struttura del componente. Per condizioni semplici, spesso basta l’operatore ternario o &&. Per scenari più complessi e una migliore organizzazione del codice, si consiglia di usare funzioni o componenti separati. Usare CSS display / visibility con cautela se non si desidera rimuovere completamente l’elemento dal DOM.

Come rendere un componente in base a una condizione?