Is there a way to disable the warnings “Invalid event handler property `onclick`” of React?

Question

I'm building a webapp with React where I need to display some ads. The problem is as follows:

I need to display these ads inside a React component, I've been give the html code of these ads and they work fine (So far) but they throw a big warning:

    index.js:1375 Warning: Invalid event handler property `onclick`. Did you mean `onClick`?
        in a (at ad-display.component.jsx:4)

I do know that the reason of the warning is the onclick property that should be onClick instead, however I don't want to mess up with the original HTML code that has been given to me, in case it would affect my client's revenue

The code of the ad is a simple a tag:

    <a onclick="setSomething(event, this)" href="http://coollink.com" id="rt_aff_banner_514" border="0" target="_blank"><img border="0" src="https://coolimage/1543860030.png"/></a>

So I was wondering if there is a way to disable these warning, cause it's getting very dificult to debug with them.

Also, feel free to scold me if the way I'm doing this is all wrong and I would need to insert this html code in any other way into my React code

Thanks in advance!

Answer 1

I think what you're looking for is dangerously set inner html:

const ads = `<a onclick="setSomething(event, this)" 
   href="http://coollink.com" id="rt_aff_banner_514"
   border="0" target="_blank">
    <img border="0" src="https://coolimage/1543860030.png"/>
   </a>`

<div id="ads" dangerouslySetInnerHTML={{ __html: ads }}></div>

Answer 2

@HanselDoullery It's a syntax warning for react. You are binding html event handler onclick , it will work as normal event handler but react compiler will give you warning as in react syntax for binding click event is slightly different. Please refer this link .

In your case you will write your click handler something like this:

<a onClick={()=> { setSomething(event, this)}} ...>
....
</a>

Answer 3

If you have a global function you could try this:

<a onClick={(e)=> { window.setSomething(event, this); }} ref="http://coollink.com" id="rt_aff_banner_514" border="0" target="_blank">
....
</a>