Operasi Reaktif pada Array Objek di React

Sekarang mari kita belajar melakukan operasi reaktif terhadap array objek. Dalam kasus ini, kita harus meneruskan id elemen array ke fungsi, yang akan kita lakukan sesuatu dengannya:

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

Untuk melakukan sesuatu pada sebuah elemen, pertama-tama kita harus mencarinya dengan mengiterasi seluruh array:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // lakukan sesuatu pada elemen
      }
      
      return note;
    }));
  }
}

Sebagai contoh, mari kita ubah teks dari objek yang ditemukan:

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