prevent a button being clicked consecutively in React - reactjs

Question

I am trying to prevent a button being clicked consecutively in my project and only allow a single click. I would also like it to only be a single click and not allow a double click if that is possible?
To do this I would like to add a time out of maybe 5 seconds before the button can be pressed again but I'm not sure how to do this. The button is a link to redirect the user back to the homepage.
Is the a way to set the button on a timer when clicked?
<Button id="back-btn" variant="link" className="btn btn-link" onClick={props.goBack} alt="homepage">
Homepage
</Button>
Any ideas?
Cheers
R

Answer 1

basically you need to use a disabled state with a timer.
check this codepen: https://codepen.io/hasanagh/pen/MWaLxVK
state = {
disabled: false,
};
handleButtonClicked = () => {
//going back logic
this.setState({
disabled: true,
});
setTimeout(() => {
this.setState(() => ({
disabled: false,
}));
}, 5000);
};
render() {
const { disabled } = this.state;
return (
<button
onClick={this.handleButtonClicked}
disabled={disabled}
>
Button to be disabled
</button>
);
}
Also, not sure why you need it to be 5 sec if this is related to a certain event better bind to event than time.

Answer 2

It's probably most re-useable to make your button component. You could handle the onClick event to set a disabled state, then start a timer to set it back to false. Example:
const DebouncedButton = ({ as = button, delay, onClick, ...props }) => {
const [isDisabled, setDisabled] = useState(false);
useEffect(() => {
if (!isDisabled) {
// timeout elapsed, nothing to do
return;
}
// isDisabled was changed to true, set back to false after `delay`
const handle = setTimeout(() => {
setDisabled(false);
}, delay);
return () => clearTimeout(handle);
}, [isDisabled, delay]);
const handleClick = (e) => {
if (isDisabled) {
return;
}
setDisabled(true);
return onClick(e);
};
const Component = as;
return <Component {...props} disabled={isDisabled} onClick={handleClick} />;
};
You would use this component just like you'd use a button, except that you pass it a delay which is the amount of time in milliseconds it should be disabled after clicking. The as prop lets you pass the component which is used for the button itself, defaulting to <button>.
<DebouncedButton
as={Button}
delay={5000}
id="back-btn"
variant="link"
className="btn btn-link"
onClick={() => console.log('click!')}
alt="homepage"
/>
Currently it sets the disabled property of the button to true, but if you don't want the visual, just remove disabled={isDisabled} from the component.