How to extract "=>" to function model

Question

I am fresher here, trying to start using => for functions and can't quite understand the inner part of a function in this code. It does work, wrote it myself, but just want to fully understand how and why.

Is there any other form you could write the exact same code in different "shape"?

I understand how first function extracts to:

function deleteNote(NoteID) {
 ...
}

But can't figure out how does the inner part work.

const deleteNote = noteID => {
        setNote(existingNotes => { return existingNotes.filter((note) => note.id !== noteID);
        })
}

Result is fine, just want to clarify what's going on... :)

Answer 1

In short, that could all be translated to:

const deleteNote = function(noteId) {
  setNote(function(existingNotes) {
    return existingNotes.filter(function(note) { 
      return note.id !== noteID;
    });
  });
};

If you wrap the part after => in curly brackets {}, then you need a return statement to return something, such as in:

setNote(existingNotes => {
  return ...;
})

If you don't wrap it around curly brackets, then whatever you put after the arrow is what will be returned, such as in:

 existingNotes.filter((note) => note.id !== noteID);

Take a look at this short article.