Začiarkavacie políčka a podmienené vykresľovanie v Reacte

Urobme tak, aby v závislosti od začiarknutia políčka sa na obrazovku zobrazil buď jeden kúsok kódu, alebo druhý. Použime na to podmienené vykresľovanie:

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

Задание 1

Dané začiarkavacie políčko. Pomocou políčka sa spýtajte užívateľa, či má už 18 rokov. Ak je políčko začiarknuté, zobrazte užívateľovi nasledujúci blok kódu:

jsx<div>
  <h2>Hurá, už máte 18</h2>
  <p>
    tu je umiestnený obsah len pre dospelých
  </p>
</div>

A ak nie je políčko začiarknuté - tak tento:

jsx<div>
  <p>
    ach, ešte nemáte 18 rokov:(
  </p>
</div>

Задание 2

Dané začiarkavacie políčko a odstavec. Ak je políčko začiarknuté, nech je odstavec viditeľný na obrazovke, a ak nie je začiarknuté - skryte ho.