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