Afkrydsningsfelter og betinget rendering i React

Lad os gøre det sådan, at afhængigt af markeringen af afkrydsningsfeltet, vises enten den ene kodebid eller den anden på skærmen. Vi bruger betinget rendering til dette:

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

Задание 1

Givet et afkrydsningsfelt. Brug afkrydsningsfeltet til at spørge brugeren, om de allerede er 18 år gamle. Hvis afkrydsningsfeltet er markeret, skal du vise brugeren følgende kodeblok:

jsx<div>
  <h2>Hurra, du er allerede 18 år</h2>
  <p>
    her er indholdet kun for voksne
  </p>
</div>

Og hvis afkrydsningsfeltet ikke er markeret - så følgende:

jsx<div>
  <p>
    desværre, du er ikke 18 år endnu:(
  </p>
</div>

Задание 2

Givet et afkrydsningsfelt og et afsnit. Hvis afkrydsningsfeltet er markeret, lad afsnittet være synligt på skærmen, og hvis det ikke er markeret - skjul det.