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

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

`function App() { const [notes, setNotes] = useState([1, 2, 3, 4, 5]); const result = notes.map((note, index) => { return <li key={index} onClick="() => doSmth(index)"> {note} </li>; }); return <div> <ul> {result} </ul> </div>; }`

Внутри нашей функции мы можем совершить любую операцию над нашим элементом массива:

`function App() { ... function doSmth(index) { let copy = Object.assign([], notes); copy[index] += '!'; // что-то сделаем с элементом setNotes(copy); } }`

Дан массив с числами. Выведите его в виде списка `ul`. По клику на любую `li` возведите ее число в квадрат.

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

Дан инпут. По клику на любую `li` сделайте так, чтобы текст этой `li` попал в инпут.

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

Дана кнопка. По клику на эту кнопку переверните порядок `li` на обратный.

←→
↑