Difference between onsubmit and onclick in react as props

Question

I am new to react and javascript.I want to do authetication part in my web.i want test whether the status change on my parent component after onsubmit the form which i have set one button and one form in the child component with the same function.But only button using the conclick works.

My children component is here using props (index.js):

const [loginStatus, setLoginStatus] = useState(false);

 function handlelogout() {
  setLoginStatus(false);
  console.log("logged out");
}  

const login=()=>{console.log("loginstatus"+loginStatus)
  setLoginStatus(true);console.log("login")} 
  return(
    <BrowserRouter>
    <Layout  loginstatus={loginStatus} // <-- boolean true/false
  logout={handlelogout}  />
    <Routes>
     
      <Route path="/" /> 
      
      <Route index element={<App />}/>
      <Route path="login" element={<Login   login={login } />}/>
      <Route path="register" element={<Register />}/>

my children component (login.js):

return (
    <><div className='Registerform'>
        <h3>Login Form</h3><br></br>
        <Form onSubmit={props.login} > //<--this fail
            <Form.Group className="mb-3" controlId="formBasicName">
                <Form.Label>Username</Form.Label>
                <Form.Control type="username" placeholder="Enter your username" />

            </Form.Group><br></br>
            


            <Form.Group className="mb-3" controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" placeholder="Password" />
                
            </Form.Group><br></br>

           

            <Button variant="primary" type="submit">
                Submit
            </Button>
        </Form>
        </div>
        
        <Button onClick={props.login} variant="primary">Primary</Button> </> //<--- this works fine

layout part:

const loginStatus=props.loginstatus
  

  console.log("layout: "+loginStatus)

In my console log,when clicking button(work case):

loginstatusfalse
login
layout: true
layout: true

when clicking form:

loginstatusfalse
login

(console refresh automatically)
layout:false
layout:false

layout=true is what i expected as an ideal.But i dont know why the console refresh in onsubmit by form and change the loginstate at the layout.but with the same function as the boton.May anyone know the reason behind these?

Answer 1

When you submit the form with a button, if you don't disable the default action, the page will refresh itself. I think the error you are experiencing is caused by this.

The onClick property just executes the function.onSubmit submits a form. Technically, it tends to send the form to the server and refreshes the page to catch the response from the server. Here, I think it will be enough for you to disable this action by default and call your own function.

in your login.js

function onSubmitHandler(event){
    event.preventDefault(); // disables the default submit action
    props.login(); // your login function that works fine.
}


<Form onSubmit={onSubmitHandler} > // <-- Only changed here...
    <Form.Group className="mb-3" controlId="formBasicName">
        <Form.Label>Username</Form.Label>
        <Form.Control type="username" placeholder="Enter your username" />
    </Form.Group><br></br>
...

Try this.