Solution 1 :

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.

enter image description here

Solution 2 :

You can try this

const handleSubmit = e => {
  e.preventDefault();
  console.log("hello");
};

Problem :

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.

By