When building interactive applications, it’s common to run into the issue of triggering multiple toast notifications from multiple clicks, especially if users are impatient and click buttons repeatedly. To prevent this, we can manage button clicks by disabling the button after the first click, ensuring that no extra toasts are triggered.
A common way to achieve this is by using state to control whether a button is enabled or disabled. Here’s how you can avoid multiple toast notifications and manage button behavior effectively.
Using State to Control Button Behavior
We use the state variable isButtonDisabled to dynamically control whether the button is clickable. By doing so, the button can be disabled after an initial action, preventing multiple submissions or actions that lead to multiple toasts.
<button
className=”border border-gray-300 px-4 py-2 rounded-md text-sm font-medium text-gray-500 hover:bg-cyan-900 hover:text-white focus:outline-none”
onClick={updateVendorBill}
disabled={isButtonDisabled} // Disable the button based on state
>
{currentTab === 3 ? “Finish” : “Next”}
</button>
In this example:
- The
disabled={isButtonDisabled}property disables the button whenisButtonDisabledistrue, and enables it whenfalse. - This ensures that after clicking the button once, further clicks are blocked until some other condition re-enables it.
Setting the State to Control Button Clicks
You can set or reset the isButtonDisabled state based on specific conditions, such as when a form is submitted or an action is completed.
Disabling the Button after Form Submission
When submitting a form, you want to prevent multiple submissions until the request is processed. Disabling the button after the first click is a great way to do this.
Example:
const handleSubmit = () => {
// Form submission logic
setIsButtonDisabled(true); // Disable the button to prevent multiple submissions
};
In the handleSubmit function, you disable the button immediately after it’s clicked, preventing further clicks and stopping multiple toasts from appearing.
Re-enabling the Button Based on Form Validity
You might want to re-enable the button once a certain condition is met, such as when the form becomes valid again. For example:
useEffect(() => {
if (formValid) {
setIsButtonDisabled(false); // Re-enable the button when form is valid
}
}, [formValid]);
This example uses a useEffect hook to monitor the formValid state. Once the form is valid, the button is re-enabled, allowing users to submit it again.
Real-World Use Cases for Button Control
Here are a few practical ways to use this isButtonDisabled functionality in your code:
1. Form Submission
When submitting data (e.g., updating a vendor bill), you might want to disable the button during the submission process to prevent duplicate submissions:
const updateVendorBill = () => {
setIsButtonDisabled(true);
// Call API to update vendor bill
// Once complete, setIsButtonDisabled(false);
};
2. Validation
If you’re handling a multi-step form, you could disable the “Next” or “Finish” button until all required form fields are filled or validated:
const validateForm = () => {
if (allFieldsValid) {
setIsButtonDisabled(false); // Enable the button
} else {
setIsButtonDisabled(true); // Disable the button
}
};
Conclusion
By using a simple state management technique, you can avoid issues like multiple toasts appearing from repeated clicks. Disabling buttons based on certain conditions not only prevents unwanted UI behavior but also improves the user experience by ensuring that actions are processed in a controlled manner.
This approach can be applied to any button or interactive element where user interaction needs to be controlled, such as preventing duplicate API requests, blocking multiple form submissions, or enforcing validation before proceeding.