Uncaught TypeError: Login is not a function

New to react. I keep getting this error message "Uncaught TypeError: Login is not a function at submitHandler".

I cannot figure out what I am doing incorrect.

My react version : "react": "^16.14.0",

I hope that someone can help me with this matter !!

This is my code :

LoginForm.js

import React, {useState} from 'react';

function LoginForm({Login, error}) {

    const[details, setDetails] = useState({name:"", email:"", password: ""});
    console.log(Login);
    const submitHandler = e => {
        e.preventDefault();
        Login(details);   
    }

    return (
        <form onSubmit = {submitHandler}>
            <div className="form-inner">
                <h2> Login </h2>
                {(error !== "") ? (<div className = "error">{error}</div>) : ""}
                <div className="form-group">
                    <label htmlFor="name"> Name: </label>
                    <input type="text" name="name" id="name" onChange={e => setDetails({...details,name: e.target.value})} value={details.name}/>
                </div>
                <div className="form-group">
                    <label htmlFor="email"> Email: </label>
                    <input type="email" name="email" id="email" onChange={e => setDetails({...details,email: e.target.value})} value={details.email}/>
                </div>
                <div className="form-group">
                    <label htmlFor="password"> Pasword: </label>
                    <input type="password" name="password" id="password" onChange={e => setDetails({...details,password: e.target.value})} value={details.password}/>
                </div>
                <input type="submit" name="submit" value="Se connecter"/>
            
            </div>
        </form>

    )

}

export default LoginForm;

App.js

import React, {useState} from 'react';
import LoginForm from './components/LoginForm';
  

function App() {
  const adminUser = {
    email: "",
    password: ""
  }

  const [user, setUser] = useState({name:"", email:""});
  const [error, setError] = useState("");

  const Login = details => {  

    if (details.email == adminUser.email && details.password == adminUser.password){
      console.log("Logged in");
      setUser({
        name: details.name,
        email: details.email
      });
    } else {
      console.log("Details do not match!");
      setError("Details do not match!");
    }
  }

  const Logout = () => {
    setUser({name: "", email:""});
  }
  return (
    <div className="App">
      {(user.email != "") ? (
        <div className = "welcome">
          <h2> Welcome, <span> {user.name} </span></h2>
          <button onClick={Logout}>Logout</button>
        </div>
      ) : (
        <LoginForm login={Login} error={error}/>
      )}     
    </div> 

  )};

export default App;

CodePudding user response：

maybe it's because of the case-sensitive name

you are passing data in login with small l in App.js

<LoginForm login={Login} error={error}/>

and trying to get Login with capital L in LoginForm.js

function LoginForm({Login, error}) {

so making it lower-case in LoginForm.js will solve it

function LoginForm({login, error}) {

    const[details, setDetails] = useState({name:"", email:"", password: ""});
    console.log(Login);
    const submitHandler = e => {
        e.preventDefault();
        login(details);   
    }

CodePudding user response：

The prop is lowercase:

 <LoginForm login={Login} error={error}/>

Just make it also lowercase on your form:

function LoginForm({login, error}) {

    const[details, setDetails] = useState({name:"", email:"", password: ""});
    console.log(Login);
    const submitHandler = e => {
        e.preventDefault();
        login(details);   
    }

CodePudding user response：

Case sensitive, in App.js should be

<LoginForm Login={Login} error={error}/>