How do I add an onclick to a social embed in React

Question

I am using the npm library react-social-media-embed .

render: (url) => (
      <EmbedContainer>
        <TwitterEmbed width={"100%"} url={url} />
      </EmbedContainer>
    ),

I am doing my embed implementation like above. I have an object of different social embeds which is why i use the render property to call it

What I wish to do is to run a function whenever a user has clicked on the embed in order to track clicks etc etc.

I have tried adding an onclick to the parent container, using an overlay div ontop of the embed, modifying source code for the library directly and nothing has worked out. Any ideas?

Answer 1

useEffect(() => {
    const handler = (e) => {     
        // check if e.target is embed container
    }
    
    document.addEventListener("click", handler);

    return () => {
        document.removeEventListener("click", handler)
    }
}, [])

Add the click event listener to the document instead