Kontrollkastid ja tingimuslik renderdamine Reactis

Teeme nii, et sõltuvalt kontrollkasti märgist kuvatakse ekraanil kas üks koodijupp või teine. Kasutame selleks tingimuslikku renderdamist:

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

Задание 1

Antud on kontrollkast. Küsige kontrollkasti abil kasutajalt, kas ta on juba 18 aastat vana. Kui kontrollkast on märgitud, näidake kasutajale järgmist koodiplokki:

jsx<div>
  <h2>Hurraa, sa oled juba 18</h2>
  <p>
    siin asub sisu ainult täiskasvanutele
  </p>
</div>

Kui kontrollkast pole märgitud - siis järgmist:

jsx<div>
  <p>
    kahjuks, sa pole veel 18-aastane:(
  </p>
</div>

Задание 2

Antud on kontrollkast ja lõik. Kui kontrollkast on märgitud, olgu lõik ekraanil nähtav, aga kui pole märgitud - peidake see.