React.js onClick return event-CodePudding

I had properly working link with JS onclick attribute on a CMS, the code looked like this:

<a onclick="return klaro.show();">click</a>

it was opening the model window. Now I'm trying to replicate this on an old React.js project. I remember, that there are a few language notations, but as I'm not working at all with this language it's difficult for me.

I've these kind of links:

    <li><a href="#link">{t('Link')}</a></li>
    <li><a  onclick="return klaro.show();">{t('cookie choice')}</a></li>

But since it's React the last link is not working. I tried to change it to <a className="button is-success" onClick={() => "return klaro.show();"}>člick</a> but the onClick event is absent once the page is rendered.

How should it be done correctly with this notation?

CodePudding user response：

Pass a reference to of klaro.show to the onClick prop. This will tell React to call the klaro.show method when you click.

<a className="button is-success" onClick={klaro.show}>člick</a>

CodePudding user response：

People already answered the question correctly; but there is another dirty unclean way to do that as well; I don't recommend it, just for your information:

<li dangerouslySetInnerHTML={{__html: `
   <a  onclick="return klaro.show();">click</a>`
}}></li>

CodePudding user response：

Use this

<li><a href="#link">{t('Link')}</a></li>
<li><a  onClick={klaro.show}>{t('cookie choice')}</a></li>

Or Use Like This

<li><a href="#link">{t('Link')}</a></li>
<li><a  onClick={() => klaro.show()}>{t('cookie choice')}</a></li>