Hello when I test it as follow it works fine
import React, { useCallback } from "react";
function Home() {
const handleSubmit = useCallback(
e => {
e.preventDefault();
alert("hello")
},
[]
);
return (
<div>
<h1>API data</h1>
<form className="c-form" onSubmit={handleSubmit}>
<input
className="c-form__input"
type="email"
/>
<label className="c-form__buttonLabel" for="checkbox">
<button className="c-form__button" type="submit">
Send
</button>
</label>
<label
className="c-form__toggle"
for="checkbox"
/>
</form>
</div>
)
}
export default Home;
Can you please post your complete component for further inspection.

You can try this
const handleSubmit = e => {
e.preventDefault();
console.log("hello");
};
I have an onSubmit function on my form that won’t fire when the user clicks the submit button and I cannot figure out why. Here’s the function:
const handleSubmit = useCallback(
e => {
e.preventDefault();
console.log("hello")
},
[]
);
Here is the form the function is being applied to:
<>
<input className="c-checkbox" type="checkbox" id="checkbox" />
<div className="c-formContainer">
<form className="c-form" onSubmit={handleSubmit}>
<input
className="c-form__input"
placeholder={notifyMeInput.input.placeholder}
type="email"
onChange={handleChange}
pattern={emailRegex}
required
/>
<label className="c-form__buttonLabel" for="checkbox">
<button className="c-form__button" type="submit">
{notifyMeInput.button}
</button>
</label>
<label
className="c-form__toggle"
for="checkbox"
data-title={notifyMeInput.label}
/>
</form>
</div>
</>
When I click the submit button, nothing happens and I don’t know why. Any help would be much appreciated.