Čekboksovi i uslovno renderovanje u React-u

Hajde da napravimo tako da, u zavisnosti od toga da li je čekboks označen, na ekranu bude prikazan ili jedan deo koda ili drugi. Koristićemo uslovno renderovanje:

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

Задание 1

Dat je čekboks. Pomoću čekboksa pitajte korisnika da li već ima 18 godina. Ako je čekboks označen, prikažite korisniku sledeći blok koda:

jsx<div>
  <h2>Ura, već vam ima 18</h2>
  <p>
    ovde se nalazi sadržaj samo za odrasle
  </p>
</div>

A ako čekboks nije označen - onda sledeći:

jsx<div>
  <p>
    avaj, još vam nema 18 godina:(
  </p>
</div>

Задание 2

Dat je čekboks i paragraf. Ako je čekboks označen, neka paragraf bude vidljiv na ekranu, a ako nije označen - sakrijte ga.