# Реактивное добавление в массив объектов в React

Давайте теперь изучим реактивность массива объектов. В данном случае мы должны будем производить любые изменения, обращаясь к элементам по `id`, которые хранятся внутри самих объектов.

Давайте попробуем. Пусть у нас есть следующий массив объектов:

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

Давайте выведем каждый элемент нашего массива в отдельном теге `li`:

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

Сделайте кнопку, по нажатию на которую будет добавляться новый элемент в конец массива, тем самым добавляя новый `li` в конец тега `ul`.

Сделайте три инпута и кнопку. По нажатию на кнопку из данных инпута создайте новую `li` в конце тега `ul`.

← →
↑