রিএ্যাক্টে চেকবক্স এবং শর্তসাপেক্ষ রেন্ডারিং

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 years হয়েছে কিনা। যদি চেকবক্সটি চিহ্নিত থাকে, তবে ব্যবহারকারীকে নিম্নলিখিত কোড ব্লকটি দেখান:

jsx<div>
  <h2>হুররে, আপনার বয়স ইতিমধ্যেই ১৮ হয়েছে</h2>
  <p>
    এখানে শুধুমাত্র প্রাপ্তবয়স্কদের জন্য কন্টেন্ট রয়েছে
  </p>
</div>

আর যদি চেকবক্স চিহ্নিত না থাকে - তবে নিম্নলিখিতটি:

jsx<div>
  <p>
    হায়, আপনার বয়স এখনও ১৮ বছর হয়নি:(
  </p>
</div>

Задание 2

একটি চেকবক্স এবং একটি অনুচ্ছেদ দেওয়া আছে। যদি চেকবক্সটি চিহ্নিত থাকে, তবে অনুচ্ছেদটি পর্দায় দৃশ্যমান থাকবে, আর যদি চিহ্নিত না থাকে - তবে এটি লুকিয়ে দিন।