Чекбокси и условен рендеринг во 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

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