I am trying to stop the parent div from executing an onClick event when the child Delete button is clicked.
JavaScript
x
9
1
<div>
2
{notes.map((val) => {
3
return
4
<div key={val.id} onClick={() => Logic.selectNote(val.note, val.id)} className="editorDiv">
5
<Delete className="delBtn" onClick={(e) => del(e, val.id)}></Delete>
6
<ReactQuill className="note" value={Logic.limitDisplayText(val.note)} readOnly={true} /></div>
7
})}
8
</div>
9
I tried to implement event.stopPropogation
however, it gives me an error.
JavaScript
1
5
1
function del(e, noteId) {
2
e.stopPropogation()
3
localStorage.removeItem(noteID)
4
}
5
Advertisement
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.