Ajout réactif dans un tableau d'objets dans React

Étudions maintenant la réactivité d'un tableau d'objets. Dans ce cas, nous devrons effectuer toutes modifications en accédant aux éléments par leur id, qui sont stockés à l'intérieur des objets eux-mêmes.

Essayons. Supposons que nous ayons le tableau d'objets suivant :

jsxconst initNotes = [
  {
    id: 'GYi9G_uC4gBF1e2SixDvu',
    prop1: 'value11',
    prop2: 'value12',
    prop3: 'value13',
  },
  {
    id: 'IWSpfBPSV3SXgRF87uO74',
    prop1: 'value21',
    prop2: 'value22',
    prop3: 'value23',
  },
  {
    id: 'JAmjRlfQT8rLTm5tG2m1L',
    prop1: 'value31',
    prop2: 'value32',
    prop3: 'value33',
  },
];

Affichons chaque élément de notre tableau dans une balise li séparée :

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>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}