1

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)
    }
Arcanus
  • 642
  • 5
  • 20
  • I pass it to a function to remove that item. – Arcanus Aug 05 '21 at 22:07
  • You can't next a clickable area inside another clickable area. This is never going to work and not valid in HTML. Use CSS to make the item look like it's within the other area but structure the HTML so that both clickable items are next to each other and not nested. – Dominik Aug 05 '21 at 22:07
  • @Dominik - of course it's valid, and happens not infrequently. (It could be argued that particular cases, or even in general, it's not wise to do - but it's certainly not invalid HTML.) You do indeed need the `stopPropagation` method - sadly the OP just says "it gives me an error" without showing the code where they tried to use it. You need something like `onClick={(e) => {e.stopPropagation(); del(val.id);}}` – Robin Zigmond Aug 05 '21 at 22:09
  • @RobinZigmond You are right, it works now. I copied your spelling and realized I misspelled ```stopPropagation``` as ```stopPropogation```. Thanks. Should I leave my question up if it was a spelling mistake? – Arcanus Aug 05 '21 at 22:24
  • Find your answer here. Got to do with event bubbling. https://stackoverflow.com/questions/38619981/how-can-i-prevent-event-bubbling-in-nested-react-components-on-click – tksilicon Aug 05 '21 at 22:30

1 Answers1

0

In case anyone has the same problem as me, simply use e.stopPropagation(). This stops the click event from bubbling up to the other HTML elements.

ZachTheDev
  • 35
  • 7
Arcanus
  • 642
  • 5
  • 20