Spectrum is now read-only. Learn more about the decision in our official announcement.


A community of developers, designers and others who love React.js. ⚛️


[HELP] React Scratch Card

July 1, 2021 at 1:14pm

[HELP] React Scratch Card

July 1, 2021 at 1:14pm
Hi all,
I am writing this post concerning a Scratchcard component for React. This is the link:
At this moment I am dealing with the following issue:
Piece of code: onCompleted ={ () => myFunction} completedAt = {60}
See the code above where completedAt is assigned with 60. When this is true then onCompleted will run myFunction. This works fine and is intended to. However because completedAt is true, myFunction will continuously run.
Want I want is myFunction to run ONCE when completedAt is true (until the next render). I am wondering if anyone could help with this customization. Much appreciated for reading my post. Thank you all!
With Kind Regards, a fellow potato programmer

July 1, 2021 at 2:16pm
You say that you want your myFunction to be run one time when completedAt is true. DONT DO THAT, completedAt is not intended to be used as a boolean. The mere fact that myFunction is executed tells you that the scratch card IS IN FACT completed. You don't need to check....if your issue is something else. Please clarify

July 10, 2021 at 3:52pm
Call onCompleted in a useEffect that uses isCompleted as a dependency.
useEffect(()=> {
isCompleted && onCompleted()
}, [isCompleted])
isCompleted should only be set to true once, and even if you're repeatedly setting it to true (which you should not be), the useEffect should only run once.
Unrelated: I looked at the demo, this is a cool component!