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:

jsxfunction 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>;
}

Задание 1

È 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:

jsx<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:

jsx<div>
  <p>
    ahimè, non hai ancora 18 anni:(
  </p>
</div>

Задание 2

Sono dati una checkbox e un paragrafo. Se la checkbox è selezionata, lascia che il paragrafo sia visibile sullo schermo, e se non è selezionata - nascondilo.