How to override div onClick event when button is clicked?

I am trying to stop the parent div from executing an onClick event when the child Delete button is clicked.

<div>
    {notes.map((val) => {
       return 
      <div key={val.id} onClick={() => Logic.selectNote(val.note, val.id)} className="editorDiv">
      <Delete className="delBtn" onClick={(e) => del(e, val.id)}></Delete>
      <ReactQuill className="note" value={Logic.limitDisplayText(val.note)} readOnly={true}  /></div>
    })}
</div>

I tried to implement event.stopPropogation however, it gives me an error.

function del(e, noteId) {
        e.stopPropogation()
        localStorage.removeItem(noteID)
    }

Answer

In case anyone has the same problem as me, simply use e.stopPropogation(). This stops the click event from bubbling up to the other HTML elements. Thought I’d add it as an answer to make it clear.