Žymimieji langeliai ir sąlyginis renderinimas React

Padarykime taip, kad, priklausomai nuo žymimojo langelio būsenos, ekrane būtų rodoma viena kodo dalis arba kita. Tam naudokime sąlyginį renderinimą:

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

Задание 1

Duotas žymimasis langelis. Naudodamiesi žymimuoju langu, paklauskite naudotojo, ar jam jau yra 18 metų. Jei žymimasis langelis pažymėtas, parodykite naudotojui šį kodo bloką:

jsx<div>
  <h2>Valio, jums jau yra 18</h2>
  <p>
    čia yra turinys skirtas tik suaugusiems
  </p>
</div>

O jei žymimasis langelis nepažymėtas - tai šį:

jsx<div>
  <p>
    deja, jums dar nėra 18 metų:(
  </p>
</div>

Задание 2

Duotas žymimasis langelis ir pastraipa. Jei žymimasis langelis pažymėtas, tebūnie pastraipa matoma ekrane, o jei nepažymėtas - paslėpkite ją.