रिएक्ट में चेकबॉक्स और सशर्त रेंडरिंग

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

एक चेकबॉक्स और एक पैराग्राफ दिया गया है। यदि चेकबॉक्स चिह्नित है, तो पैराग्राफ स्क्रीन पर दिखाई देना चाहिए, और यदि चिह्नित नहीं है - तो इसे छिपा दें।