React.js onClick return event

Question

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

<a class="button is-success" 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 class="button is-success" 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?

React doesn't onclick attributes to the html. It rather does event delegation. Also, your onClick prop is invalid. It should be more like this onClick={() => klaro.show()}, but I think you are trying to do something else. — Konrad
– Konrad, Commented Oct 2, 2022 at 16:23

Emiel Zuurbier · Accepted Answer · 2022-10-02 16:25:22Z

1

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>

answered Oct 2, 2022 at 16:25

Emiel Zuurbier

21.2k3 gold badges25 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mechanic Over a year ago

doesonClick={klaro.show} behave the same as onClick={() => klaro.show()} return-wise?

Emiel Zuurbier Over a year ago

No, onClick={() => klaro.show()} will return the result from klaro.show(), onClick={klaro.show} will not. But you don't need to use return as you're not doing anything with the result that klaro.show() produces.

Mechanic Over a year ago

they might return false to prevent default action of the <a> tag;

Emiel Zuurbier Over a year ago

The anchor tag doesn't have an href attribute. So it wouldn't do anything otherwise by default.

Mechanic · Accepted Answer · 2022-10-02 17:15:01Z

1

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 class="button is-success" onclick="return klaro.show();">click</a>`
}}></li>

answered Oct 2, 2022 at 17:15

Mechanic

5,4484 gold badges19 silver badges44 bronze badges

Comments

Md Misbauddin Chowdhury · Accepted Answer · 2022-10-02 16:29:15Z

0

Use this

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

Or Use Like This

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

answered Oct 2, 2022 at 16:29

Md Misbauddin Chowdhury

6541 gold badge7 silver badges14 bronze badges

3 Comments

Emiel Zuurbier Over a year ago

You're mixing Vanilla JS and React.

Kuzma Over a year ago

Thank you, the <a class="button is-success" onClick={() => klaro.show()}>{t('click')}</a> works as expected

Md Misbauddin Chowdhury Over a year ago

Yes for react you have to use lots of keyword differently. See React Official Documentation for example of some attributes class -> className for -> htmlFor onclick -> onClick onfocus -> onFocus

Collectives™ on Stack Overflow

React.js onClick return event

3 Answers 3

4 Comments

Comments

Use this

Or Use Like This

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Use this

Or Use Like This

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related