Чекбоксы и условни рендеринг у React-у

Хајде да направимо тако да, у зависности од ознаке чекбокса, на екран буде испоручен или један део кода или други. Користимо за то условни рендеринг:

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

Задание 1

Дат је чекбокс. Помоћу чекбокса питајте корисника, да ли већ има 18 година. Ако је чекбокс означен, прикажите кориснику следећи блок кода:

jsx<div>
  <h2>Ура, већ имате 18 година</h2>
  <p>
    овде се налази садржај само за одрасле
  </p>
</div>

А ако чекбокс није означен - онда следећи:

jsx<div>
  <p>
    авај, још немате 18 година:(
  </p>
</div>

Задание 2

Дат је чекбокс и пасус. Ако је чекбокс означен, нека пасус буде видљив на екрану, а ако није означен - сакријте га.