React add element by onClick and remove them after timeout

Question

I want to create ripple-effect on button.

When I click on Button component I want to add span element as it's child. It contains some CSS to make ripple effect. After 900ms I want to remove this span element. This idea founded here

Here some Sandbox to explain main idea.

So, the trouble is when I make fast multiple clicks and ripple-effect span is not working properly

Answer 1

Due to the fact that you are using a single Ripple instead of mutiple ripples, your effect only works if the user does not click a second time, while time since the first click and your 900ms timeout has not passed.

You might create generated ripples on demand and delete them after the animation has ended with a custom event. So using setTimeout() will always trigger wrong behavior if user clicks mutiple times, because your code forces the single ripple to work like multiple ripples alone.

Hope my explanation was precise and clear enough.