Potrditvena polja in pogojno upodabljanje v Reactu

Naredimo tako, da se glede na označenost potrditvenega polja na zaslon izpiše ali en del kode ali drug. Uporabimo za to pogojno upodabljanje:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>sporočilo 1</p>;
  } else {
    message = <p>sporočilo 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

Задание 1

Podano je potrditveno polje. S pomočjo potrditvenega polja vprašajte uporabnika, ali je starih 18 let. Če je potrditveno polje označeno, pokažite uporabniku naslednji blok kode:

jsx<div>
  <h2>Hura, že imate 18 let</h2>
  <p>
    tukaj se nahaja vsebina samo za odrasle
  </p>
</div>

Če pa potrditveno polje ni označeno - pa naslednji:

jsx<div>
  <p>
    žal, še nimate 18 let:(
  </p>
</div>

Задание 2

Podano je potrditveno polje in odstavek. Če je potrditveno polje označeno, naj bo odstavek viden na zaslonu, če pa ni označeno - ga skrijte.