How to prevent a double submit - reactjs

Question

I have the current code where with a button (OpenModal.jsx) the user open a modal where he can save data in a database, the problem that I have is that if the user is fast enough to click submit twice before the modal close he can save the same data twice (send a double submit).
What is the best way to prevent this?
OpenModal.jsx
const OpenModal = () => {
const [openModal, setOpenModal] = useState(false);
return (
<div className="container">
<button
className="openModalBtn"
onClick={() => {
setOpenModal(true);
}}
>
Set note
</button>
{openModal && <Modal closeModal={setOpenModal} />}
</div>
);
};
Modal.jsx
import { useState } from "react";
const Modal = ({ closeModal }) => {
const [data, setData] = useState({
note: "",
});
const submit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
`${process.env.REACT_APP_API_KEY}`,
{
note: data.note,
}
);
response.data.success ? closeModal(false) : null;
} catch (error) {
console.log(error);
}
};
const handle = (e) => {
const getData = { ...data };
getData[e.target.id] = e.target.value;
setData(getData);
};
return (
<div className="modal">
<div className="modal-content">
<form onSubmit={(e) => submit(e)}>
<div className="close-content">
<button
type="button"
className="btn-close"
onClick={() => {
closeModal(false);
}}
>
X
</button>
</div>
<div className="form-content">
<label>
Note:
<input
type="text"
required
onChange={(e) => handle(e)}
id="note"
/>
</label>
</div>
<div className="buttons-form">
<button
type="button"
className="btn-cancel"
onClick={() => {
closeModal(false);
}}
>
Cancel
</button>
<button className="btn-save" type="submit">
Save
</button>
</div>
</form>
</div>
</div>
);
};

Answer 1

Disable the button while the operation is processing. You can keep a disabled flag in state:
const [isDisabled, setIsDisabled] = useState(false);
And use it on the button:
<button className="btn-save" type="submit" disabled={isDisabled}>
Save
</button>
Then update that state as needed:
const submit = async (e) => {
setIsDisabled(true); // <--- here
e.preventDefault();
try {
const response = await axios.post(
`${process.env.REACT_APP_API_KEY}`,
{
note: data.note,
}
);
setIsDisabled(false); // <--- here
response.data.success ? closeModal(false) : null;
} catch (error) {
setIsDisabled(false); // <--- here
console.log(error);
}
};
For improved UX, you might even replace the button text with a spinner or some other indication that "something is processing" while it's disabled.

Answer 2

You could have an isLoading state that you set to true when the submit button is clicked and false when the request is completed. Then, you can either make the button disabled when that state is true or simply don't send the request in the submit function if the request is loading:
const [isLoading, setIsLoading] = useState(false);
const submit = async (e) => {
e.preventDefault();
if (isLoading)
return;
setIsLoading(true);
try {
const response = await axios.post(
`${process.env.REACT_APP_API_KEY}`, {
note: data.note,
}
);
response.data.success ? closeModal(false) : null;
} catch (error) {
console.log(error);
} finally {
setIsLoading(false);
}
};

Answer 3

You should introduce safety flag, to know when submitting started and when finished, and like that user will not be able to hit it twice because you can set constraints with flag. Do something like this:
const [data, setData] = useState({
note: "",
});
const [submitting, setSubmitting] = useState(false);
const submit = async (e) => {
e.preventDefault();
if(!submitting) {
setSubmitting(true);
try {
const response = await axios.post(
`${process.env.REACT_APP_API_KEY}`,
{
note: data.note,
}
);
response.data.success ? closeModal(false) : null;
} catch (error) {
console.log(error);
} finally {
setSubmitting(false);
}
}
};