Реализация удаления элементов из массива в React


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

function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);

const result = notes.map((note, index) => {
return <p key={index}>{note}</p>;
});

return <div>
{result}
</div>;
}
Давайте сделаем так, чтобы по клику на абзац происходило его удаление. Согласно идеологии React для этого нам нужно будет удалять соответствующий элемент массива. В этом случае React автоматически в соответствии с изменениями массива внесет изменения в HTML код.

Для начала давайте к каждому абзацу привяжем событие, в котором будет вызываться функция remItem для удаления:

const result = notes.map((note, index) => {
return <p key={index} onClick={remItem}>{note}</p>;
});
Функция remItem должна знать номер абзаца для удаления. Это значит, что этот номер нужно передать параметром при вызове функции.

Мы знаем, что номер каждого абзаца последовательно попадает в переменную index от цикла map. Значит, передадим параметром функции эту переменную:

const result = notes.map((note, index) => {
return <p key={index} onClick={() => remItem(index)}>
{note}
</p>;
});
В функции remItem будет доступен номер элемента массива для удаления:

function remItem(index) {
console.log(index);
}
Напишем код для удаления элемента массива:

function remItem(index) {
setNotes([...notes.slice(0, index), ...notes.slice(index + 1)]);
}
Давайте теперь соберем весь наш код вместе. Теперь по клику на любой абзац он будет удаляться:

function App() {
const [notes, setNotes] = useState([1, 2, 3, 4, 5]);

const result = notes.map((note, index) => {
return <p key={index} onClick={() => remItem(index)}>
{note}
</p>;
});

function remItem(index) {
setNotes([...notes.slice(0, index), ...notes.slice(index + 1)]);
}

return <div>
{result}
</div>;
}