Use React's dangerouslySetInnerHTML to pass onClick event (that uses this.props) to an anchor tag

Viewed 1278

I'm working on an internationalized site that uses json files to dynamically fill in copy on the page.

I'm working with a paragraph tag that has a hyperlink that it receives from the json file by way of React's dangerouslySetInnerHTML.

The problem is that, for legal reasons, I can't simply embed a link like this. I need to trigger a popup warning any time a user clicks a link that takes them away from the site (it's a site for children).

Here is how I handle this logic on another page, where a click triggers the showPopUp helper function.

<a onClick={ ()=> { this.props.actions.showPopUp(retailer.url) }}>
    <p>Click me</p>
</a>

I tried just cutting and pasting this code into the json file, but it doesn't work. It seems like I need something like a dangerouslySetJSX attribute, but I don't think that exists.

Am I missing something? Or does anyone have a workaround?

Thanks!

0 Answers
Related