Vibonyeo na Uchoraji Masharti katika React

Wacha tufanye ili kulingana na alama ya kibonyeo, kipande kimoja cha msimbo kionyeshwe kwenye skrini, au kingine. Tutumie kwa hili uchoraji masharti:

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

Задание 1

Kibonyeo kimetolewa. Kwa kutumia kibonyeo, muulize mtumiaji kama amekwisha kufikia umri wa miaka 18. Kama kibonyeo kimewekwa alama, mwonyeshe mtumiaji kipande kifuatacho cha msimbo:

jsx<div>
  <h2>Hongera, umefikia umri wa miaka 18</h2>
  <p>
    hapa kuna maudhui kwa watu wazima pekee
  </p>
</div>

Na ikiwa kibonyeo hakijawekwa alama - kisha kipande hiki:

jsx<div>
  <p>
    samahani, bado haujafikia umri wa miaka 18:(
  </p>
</div>

Задание 2

Kibonyeo na aya kimetolewa. Ikiwa kibonyeo kimewekwa alama, acha aya iwe inayoonekana kwenye skrini, na ikiwa hajaawekwa alama - ufichie.