Zaškrtávací políčka a podmíněné renderování v Reactu

Udělejme tak, aby v závislosti na zaškrtnutí zaškrtávacího políčka byl na obrazovku vykreslen buď jeden kousek kódu, nebo druhý. Použijeme k tomu podmíněné renderování:

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

Задание 1

Je dáno zaškrtávací políčko. Pomocí zaškrtávacího políčka se zeptejte uživatele, zda je mu již 18 let. Pokud je zaškrtávací políčko zaškrtnuto, zobrazte uživateli následující blok kódu:

jsx<div>
  <h2>Hurá, je vám již 18</h2>
  <p>
    zde je umístěn obsah pouze pro dospělé
  </p>
</div>

A pokud zaškrtávací políčko není zaškrtnuto - pak následující:

jsx<div>
  <p>
    bohužel, je vám ještě méně než 18 let:(
  </p>
</div>

Задание 2

Je dáno zaškrtávací políčko a odstavec. Pokud je zaškrtávací políčko zaškrtnuto, nechť je odstavec viditelný na obrazovce, a pokud není zaškrtnuto - skryjte jej.