Form submission cancelled because the form is not connected

[basicallyababy]

Hi everyone. I’m working on a project for my final year and I’m using React to create the UI.
Below is the component for the form page. It accepts a onSubmit method via props

import './../scss/adminSignUp.scss';
import React from 'react'
import { useForm } from 'react-hook-form';

const AdminSignUp = (props) => {
  return (
    <form onSubmit={props.onSubmit}>
      <input id="email" name="email" placeholder="Type your email"></input>
      <input id="password" name="password" placeholder="Type your password"></input>
      <button type="submit">Sign in to Admin</button>
    </form>
  )
};

export default AdminSignUp;

This is the main component that uses the AdminSignUp component and passes the handleLogIn function to it.

const App = () => {
  const [isSignedIn, setIsSignedIn] = useState(false);
  const handleLogIn = () => setIsSignedIn(true);
  const handleLogOut = () => setIsSignedIn(false);

  if (isSignedIn) {
    return (
      <div id="dashboard">
        <section id="menu-options">
          <span>Hey Admin</span>
          <button>Add Teacher</button>
          <button>Add Subjects</button>
          <LogOutBtn onClick={handleLogOut} />
        </section>
        <section id="view">
          <AddTeacher />
        </section>
      </div>
    );
  } 
  return (
    <div>
      <p>Sign in to Admin</p>
      <AdminSignUp onSubmit={handleLogIn} />
    </div>
  )
};

The components seem to be working fine, but on console it shows an error saying Form submission cancelled because the form is not connected

What am I doing wrong and how could I fix this?

[Marmiz]

Hello @basicallyababy , welcome to the forum.

That warning seems to happen because you remove the form from the page while the browser is still processing the event.

I think you can try to preventDefault the submission event of the form will make the warning goes away.

Hope this helps

[basicallyababy]

Thank you so much for helping me. Let me try this once.