Add callback for click

[breadadams]

Would be ideal to allow users to hook into the onClick event, returning them a payload. eg.

{
 'event': Event,
 'totalClickCount': 345,
 'userClickCount': 13
}

It'd probably be best to do it "after click", so maybe an afterClick prop? That we'd add as the callback to the current onClick method's this.setState(….

[Kikobeats]

good point 🙂

[anandundavia]

Any updates on this issue !?

[nfedyashev]

HTH

meanwhile I'm using

componentDidUpdate(prevProps, prevState) {
if (this.state.count !== prevState.count) {

[Kikobeats]

People interested in this; Please make a PR, this is a trivial thing that can be added into the library easily.

[danielthedifficult]

Hello all,

I'm not sure if I'm doing something wrong or if there is an issue with this implementation.

Basically, I'm logging claps to my back-end for analytics purposes, but each clap is getting logged twice.

What is strange is that in the below example, console.log only logs once, but alert() will get called twice, with two dialog boxes spawned.

<ClapButton onCountChange={() => { console.log("User clapped!") alert("test function call") } iconComponent={props => <CustomIcon {...props} size={38} /> } />

Anyone know how/why?

[danielthedifficult]

Workaround is enclosing the <ClapButton component in a div with an onClick that triggers the function that logs to the backend.

Now it only gets called once, and the click handler on the parent / wrapper div doesn't prevent the ClapButton's animations / counting logic from triggering, which is great.

But, still curious why onCountChange was getting called twice...

[breadadams]

Hey @danielthedifficult, if you could provide a codesandbox or similar with a repro I'll check it out 👍

[danielthedifficult]

Sure @breadadams, here you go:
Visit here and click the clap button. You will see two alert() dialog boxes, but only one console.log message

Check the code here:
https://codesandbox.io/s/thirsty-cray-959pf?file=/src/App.js

See onCountChange function with one alert() and one console log.

''\(O.o)/''

Thanks for the rapid reply to an ancient thread :-)