Operesheni za Mitindo kwa Vitu vya Array katika React

Hebu sasa tujifunze kufanya operesheni za mitindo kwa vitu vya array. Katika kesi hii tunahitaji kupitisha kwenye kitendakazi id kipengele cha array, ambacho tunakusudi kufanya kitu nacho:

jsxfunction App() {
  const [notes, setNotes] = useState(initNotes);
  
  const result = notes.map(note => {
    return <li key={note.id}>
      <span>{note.prop1}</span>
      <span>{note.prop2}</span>
      <span>{note.prop3}</span>
      
      <button onClick={() => doSmth(note.id)}>
        btn
      </button>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

Ili kufanya kitu na kipengele, kwanza tunahitaji kukipata, kwa kupitia array nzima kwa kitanzi:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // kufanya kitu na kipengele
      }
      
      return note;
    }));
  }
}

Hebu kwa mfano tubadilishe maandishi ya kitu kilichopatikana:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        note.prop1 += '!';
        note.prop2 += '!';
        note.prop2 += '!';
        
        return note;
      }
      
      return note;
    }));
  }
}