Reaktīva objektu masīva pievienošana React

Tagad apgūsim objektu masīva reaktivitāti. Šajā gadījumā mums būs jāveic jebkādas izmaiņas, piekļūstot elementiem pēc id, kas glabājas pašos objektos.

Mēģināsim. Pieņemsim, ka mums ir šāds objektu masīvs:

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',
  },
];

Izvadīsim katru mūsu masīva elementu atsevišķā li tagā:

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