# Реактивные операции над массивами объектов в React

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

`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> <button onClick={() => doSmth(note.id)}> btn </button> </li>; }); return <div> <ul> {result} </ul> </div>; }`

Для того, чтобы что-то сделать с элементом, мы сначала должны найти его, перебрав весь массив циклом:

`function App() { ... function doSmth(id) { setNotes(notes.map(note => { if (note.id === id) { // что-то делаем с элементом } return note; })); } }`

Давайте для примера поменяем тексты найденного объекта:

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

В конце каждой `li` сделайте кнопку, по нажатию на которую эта `li` будет удаляться из списка.

Даны три инпута. В конце каждой `li` сделайте кнопку, по нажатию на которую данные объекта этой `li` будут попадать в соответствующие инпуты.

Модифицируйте предыдущую задачу так, чтобы рядом с инпутами была кнопка, по нажатию на которую данные инпутов будут попадать в соответствующую `li`.

← →
↑