Checkboxi un nosacījuma renderēšana React

Izveidosim tā, lai atkarībā no checkboxa atzīmes, ekrānā tiktu parādīts vai nu viens koda gabaliņš, vai cits. Izmantosim tam nosacījuma renderēšanu:

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

Задание 1

Dots checkboxs. Ar checkboxa palīdzību jautājiet lietotājam, vai viņam jau ir 18 gadu. Ja checkboxs ir atzīmēts, parādiet lietotājam šādu koda bloku:

jsx<div>
  <h2>Urā, jums jau ir 18</h2>
  <p>
    šeit atrodas saturs tikai pieaugušajiem
  </p>
</div>

Bet ja checkboxs nav atzīmēts - tad šādu:

jsx<div>
  <p>
    diemžēl, jums vēl nav 18 gadu:(
  </p>
</div>

Задание 2

Dots checkboxs un rindkopa. Ja checkboxs ir atzīmēts, lai rindkopa ir redzama ekrānā, bet ja nav atzīmēts - paslēpiet to.