React-da çekbokslar we şertli render

Çekboksuň bellengine görä, ekrana ýa bir kod bölegi, ýa-da beýlekisi çyksyn. Bunuň üçin şertli renderlemeginden peýdalanalyň:

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

Задание 1

Çekboks berlen. Çekboks arkaly ulanyjydan, eýýäm 18 ýaşy bar my, diýip soraň. Çekboks bellensi, ulanyjyda indiki kod bölegini görkeziň:

jsx<div>
  <h2>Hur, size eýýäm 18 ýaş</h2>
  <p>
    bir ýerde diňe uly adamlara niýetlenen mazmun ýerleşdirilen
  </p>
</div>

Eger çekboks bellinmedik bolsa - onda indiki:

jsx<div>
  <p>
    gynansak, size heniz 18 ýaş ýok:(
  </p>
</div>

Задание 2

Çekboks we abzas berlen. Çekboks bellensi bolsa, abzas ekranda görünýär bolsun, eger bellinmedik bolsa - ony gizläň.