Checkbox dhe Renderimi i Kushtëzuar në React

Le të bëjmë që në varësi të shënuarjes së checkbox, në ekran të shfaqet ose një fragment kodi, ose një tjetër. Le të përdorim për këtë renderimin e kushtëzuar:

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  let message;
  if (checked) {
    message = <p>mesazh 1</p>;
  } else {
    message = <p>mesazh 2</p>;
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <div>{message}</div>
  </div>;
}

Задание 1

Është dhënë një checkbox. Me ndihmën e checkbox pyete përdoruesin, a ka ai tashmë 18 vjet. Nëse checkbox është shënuar, shfaq përdoruesit bllokun e mëposhtëm të kodit:

jsx<div>
  <h2>Urime, ju keni mbi 18 vjet</h2>
  <p>
    këtu ndodhet përmbajtja vetëm për të rritur
  </p>
</div>

Por nëse checkbox nuk është shënuar - atëherë këtë:

jsx<div>
  <p>
    nafak, ju nuk keni ende 18 vjet:(
  </p>
</div>

Задание 2

Janë dhënë një checkbox dhe një paragraf. Nëse checkbox është shënuar, le të jetë paragrafi i dukshëm në ekran, por nëse nuk është shënuar - fshihë atë.