React front end not updating after delete operation in MERN application - node.js

Question

I have a MERN application where I'm trying to delete a note (consisting of a title and content) when the delete button is clicked. When I click the button, the backend mongoDB database is updated - the item is, in fact, deleted - but then the console spits out an error.
Here's the delete operation, traced through the relevant files:
// App.jsx
const deleteNote = id => {
NoteDataService.deleteNote(id)
.then(response => {
console.log(`note ${id} deleted`);
setNotes(prevState => {
return prevState.notes.filter(note => note._id !== id);
});
})
.catch(e => console.log(e));
};
// note.js
import http from '../http-common.js';
class NoteDataService {
createNote = data => http.post('/', data);
getAll = () => http.get('/');
deleteNote = id => http.delete(`?id=${id}`);
}
export default new NoteDataService();
// http-common.js
import http from '../http-common.js';
class NoteDataService {
createNote = data => http.post('/', data);
getAll = () => http.get('/');
deleteNote = id => http.delete(`?id=${id}`);
}
export default new NoteDataService();
And here's the error:
App.jsx:41 Uncaught TypeError: Cannot read property 'filter' of undefined
at App.jsx:41
Of the CRUD operations I'm attempting to implement, it seems only the "Read" (get) functionality is working properly to initially populate my list of notes from the backend (using useEffect() on App component load).

Answer 1

Before the component mount your state notes will be null. Do check notes in your state is not null and it's an array will be fine
prevState.notes && prevState.notes.filter(note => note._id !== id)

Answer 2

This works...
const deleteNote = id => {
NoteDataService.deleteNote(id)
.then(response => {
console.log(`note ${id} deleted`);
console.log(notes);
setNotes(notes.filter(note => note._id !== id));
})
.catch(e => console.log(e));
};