Operesheni za Mitindo kwa Arrays katika React

Hebu sasa tujifunze jinsi ya kufanya operesheni za mitindo kwa vipengele vya array. Ili kufanya hivyo, kwa kila li tutaweka kisikizi cha tukio, ambayo kwa parameta tuta kupitisha nambari ya li hiyo katika array:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
  
  const result = notes.map((note, index) => {
    return <li key={index} onClick={() => doSmth(index)}>
      {note}
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Ndani ya utendaji wetu tunaweza kufanya operesheni yoyote kwa kipengele chetu cha array:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // kufanya kitu na kipengele
    setNotes(copy);
  }
}

Задание 1

Array na nambari imetolewa. Itoe kwa mfumo wa orodha ul. Kwa kubofya kwa li yoyote inyarishe nambari yake kwa mraba.

Задание 2

Mwisho wa kila li fanya kifungo, kwa kubonyeza li hiyo itafutwa kutoka kwenye orodha.

Задание 3

Input imetolewa. Kwa kubofya kwa li yoyote fanya ili maandishi ya li hiyo ingie kwenye input.

Задание 4

Badilisha shida iliyopita ili kupoteza umakini wa input maandishi yaliyobadilishwa yaingie kwenye li inayofanana.

Задание 5

Kifungo kimetolewa. Kwa kubofya kwenye kifungo hiki geuza mpangilio wa li kwa nyuma.