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) {

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

    const data = await response.json
      alert('Login Successful')
      window.location.href = '/Home'
      alert('Login Failed')


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

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

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

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


export default Login;

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

>Solution :

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

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;

Leave a ReplyCancel reply