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

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

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <p key={note.id}>
			<span>{note.prop1}</span>,
			<span>{note.prop2}</span>,
			<span>{note.prop3}</span>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

Давайте в конце каждого абзаца сделаем кнопку для удаления:

const result = notes.map(note => {
	return <p key={note.id}>
		<span>{note.prop1}</span>,
		<span>{note.prop2}</span>,
		<span>{note.prop3}</span>
		<button onClick={() => remItem(note.id)}>remove</button>
	</p>;
});

Напишем реализацию функции remItem:

function remItem(id) {
	setNotes(notes.filter(note => note.id !== id));
}

Соберем весь код вместе и получим рабочее решение задачи:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	function remItem(id) {
		setNotes(notes.filter(note => note.id !== id));
	}
	
	const result = notes.map(note => {
		return <p key={note.id}>
			<span>{note.prop1}</span>,
			<span>{note.prop2}</span>,
			<span>{note.prop3}</span>
			<button onClick={() => remItem(note.id)}>remove</button>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

Возьмите таблицу с продуктами initProds. В конце каждого ряда сделайте ячейку, в которой будет кнопка для удаления продукта.