ჩეკბოქსები და პირობითი რენდერინგი 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

მოცემულია ჩეკბოქსი და აბზაცი. თუ ჩეკბოქსი მონიშნულია, აბზაცი იყოს ხილული ეკრანზე, ხოლო თუ არ არის მონიშნული - დამალეთ იგი.