Reactда массивлар устида реактив операциялар

Келинг энди массив элементлари билан реактив манпуляциялар қилишни ўрганамиз. Бунинг учун биз ҳар бир li га воқеа ишловчисини қўямиз, унда параметр сифатида ушбу li нинг массивдаги номерини ўтказамиз:

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>;
}

Функциямиз ичида биз ўз массивимизнинг элементи устида исталган операцияни бажара оламиз:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // элемент билан нарса қиламиз
    setNotes(copy);
  }
}