Button onsubmit() event is not working on react

I tried to coding the form submission code on ReactJS and Express,NodeJS but I got some problem with the onSubmit() event

Everytime that I code <form onSubmit={loginUser}> the button won’t submit, can’t even click. But if I remove to <form>, the button can click normally

I changed in to <input type='submit'>Login</input> and the page has gone blank

Here’s the code

import './App.css';
import { FiMail } from "react-icons/fi";
import { FiLock } from "react-icons/fi";
import profile from "./image/a.jpg";
import { useState } from 'react'

function Login() {

  const [Email, setEmail] = useState('')
  const [pass, setPassword] = useState('')

  async function loginUser (event) {
    event.preventDefault()

    const response = await fetch('http://localhost:3001/api/login', {
      method: 'POST',
      headers: {
        'Content Type':'application/json'
      },
      body: JSON.stringify({
        Email,
        pass,
      }),
    })

    const data = await response.json
    
    if(data.validPass){
      alert('Login Successful')
      window.location.href = '/Home'
    }
    else{
      alert('Login Failed')
    }

    console.log(data)
  }

  return (
    <div className='main'>
      <div>
        <div className='imgs'>
          <div className='container-image'>
            <img src={profile} alt="profile" className='profile'/>
          </div>
        </div>

        <form onSubmit = {loginUser}>
          <div className='input'>
            <div className='heard'>
              <h4>Email</h4>
            </div>
            <div className='email'>
              <FiMail/>
            </div>
            <input type="text" placeholder="Email" className="name"
            value={Email}
            onChange = {(e) => setEmail(e.target.value)}
            />
          </div>

          <div className="second-input">
            <div className="heard">
              <h4>Password</h4>
            </div>
            <div className='email'>
              <FiLock/>
            </div>
            <input type="password" placeholder="password" className="name"
            value={pass}
            onChange = {(e) => setPassword(e.target.value)}/>
          </div>

          <div className='login-button'>
            <button type="submit" value="Submit">Login</button>
          </div>
        </form>

      </div>
    </div>
  );
}

export default Login;

I tried to changed to <form onSubmit = {this.handleSubmit}> but the button still can’t click

Answer

This could be a scope problem because you have the button inside of a div

try this

<button onClick={loginUser}>Login</button>

That should call the function directly when you click the button

However, it works fine on sandbox without this edit and no css https://codesandbox.io/s/wonderful-wiles-fv9vet?file=/src/App.js

it is most likely that pointer-events is set to none on the button somewhere, try setting this css property

.login-button button {
  pointer-events: auto;
}

Advertisement

Answer