How to get child element that was clicked inside of a component?

Question

I have a component that is loading a third part script which loads in html.

I am trying to detect when a specific part of the injected html elemen is clicked.

basically:

<div>
<a></a> // detect that this linked was clicked. 
</div>

What I have:

<Container onClick={(event) => {
                    event.stopPropagation();
                    const element = event.currentTarget as HTMLElement;
                    console.log('EVENT IS', element.ClassName)
}>
 // Injected thirdparty html
</Container>

The thing I am getting is basically the Container className butI want the source of the clicked element.

How do I do this?

Answer 1

event.currentTarget is the target of the attached event. Use event.target to get where the event started.

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget