Checkbox e Rendering Condizionale in React
Facciamo in modo che, a seconda della selezione della checkbox, venga visualizzato a schermo un frammento di codice o un altro. Utilizziamo a questo scopo il rendering condizionale:
function App() {
const [checked, setChecked] = useState(true);
let message;
if (checked) {
message = <p>messaggio 1</p>;
} else {
message = <p>messaggio 2</p>;
}
return <div>
<input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
<div>{message}</div>
</div>;
}
È data una checkbox. Utilizzando la checkbox, chiedi all'utente se ha già 18 anni. Se la checkbox è selezionata, mostra all'utente il seguente blocco di codice:
<div>
<h2>Urà, hai già 18 anni</h2>
<p>
qui è posizionato il contenuto solo per adulti
</p>
</div>
E se la checkbox non è selezionata - allora il seguente:
<div>
<p>
ahimè, non hai ancora 18 anni:(
</p>
</div>
Sono dati una checkbox e un paragrafo. Se la checkbox è selezionata, lascia che il paragrafo sia visibile sullo schermo, e se non è selezionata - nascondilo.
