Чекбокстер және 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

Чекбокс және абзац берілген. Егер чекбокс белгіленген болса, абзац экранда көрінетін болсын, ал егер белгіленбеген болса - оны жасырыңыз.