Реализация удаления элементов из массива в 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>;
}

Дан массив:

const notes = ['a', 'b', 'c', 'd', 'e'];

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