Invalid hook call inside function

Question

I'm new to React, I'm trying to develop a realtime application with node js but at some point I'm stuck and can't progress. Under normal circumstances, I would write the User companet as a class, but when I did not have enough knowledge, I turned to the function. I leave the error below. Thank you. app.js

import React, {useState, useEffect} from "react";
import User from './Companents/User'

function App() {
    const [LogIn, SetLogIn] = useState(false),
        [Username, SetUsername] = useState(''),
        [Password, SetPassword] = useState(''),
        [Response, SetResponse] = useState('')

    const HandleSubmit = async function (e) {
        e.preventDefault()
        SetResponse( User(Username, Password) )
    }

    return (
        <div className={(!LogIn) ? 'App LogInScreen' : 'App'}>
            {!LogIn ? (
                <div className="LogInArea">
                    <h3>Log In</h3>
                    {Response}
                    <form className="LogInInputs" onSubmit={HandleSubmit}>
                        <input type="text" placeholder="Username" onChange={(e) => SetUsername(e.target.value)}/>
                        <input type="password" placeholder="Password" onChange={(e) => SetPassword(e.target.value)}/>
                        <button type="submit">Submit</button>
                    </form>

                    <p>Do you not have a account? <a href="">Let's create</a></p>
                </div>
            ) : (
                <div> Welcome User.Name</div>
            )}
        </div>
    );
}

export default App;

user.js

import React, {useState, useEffect} from "react";
import axios from "axios";


function Login(username, password) {
    const [Res,setRes] = React.useState(0)

    axios.post('http://localhost:8080/login', {
        'username': username,
        'password': password
    }).then(function (response) {
        // SetRes(response.data)
        console.log(response.data.code)
        // setRes(1)

    })

    return 1;
}


export default Login

The error i got:

Does this answer your question? [Invalid hook call. Hooks can only be called inside of the body of a function component](https://stackoverflow.com/questions/56663785/invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-com) — Shireesha Parampalli, Jan 12 '22 at 15:40

MWO · Answer 1 · 2022-01-12T17:56:10.913

0

You have to remove react from User.js to make it a regular function. Because you call User like a regular function in handleSubmit in App.js. To actually call a functional component is has to be from JSX like <User></User>

//import React, { useState, useEffect } from "react";
import axios from "axios";

function Login(username, password) {
  //const [Res, setRes] = React.useState(0);

  axios
    .post("http://localhost:8080/login", {
      username: username,
      password: password
    })
    .then(function (response) {
      // SetRes(response.data)
      console.log(response.data.code);
      // setRes(1)
    });

  return 1;
}

export default Login;

edited Jan 12 '22 at 17:56

answered Jan 12 '22 at 16:00

MWO

2,627
2
10
25

So how do I deliver the result from response.data.code to SetResponse in App.js? – tahakocak Jan 12 '22 at 16:02
you can make it an async function using try catch like that https://codesandbox.io/s/setinterval-closure-question-forked-t5w1m?file=/src/User.js – MWO Jan 12 '22 at 16:26

score -1 · Accepted Answer · answered Jan 12 '22 at 18:07

Making a login just an async function and calling it inside a callback should help you. See the example below.

import React, {useState, useEffect} from "react";
import axios from "axios";


const Login = async (username, password) => {
    return axios.post('http://localhost:8080/login', {
        'username': username,
        'password': password
    }).then(function (response) {
        // SetRes(response.data)
        console.log(response.data.code)
        // setRes(1)
      return response.data.code;
    })

    return 1;
}



function App() {
    const [LogIn, SetLogIn] = useState(false),
        [Username, SetUsername] = useState(''),
        [Password, SetPassword] = useState(''),
        [Response, SetResponse] = useState('')

    const HandleSubmit = async function (e) {
        e.preventDefault()
        const responseDataCode = await Login(Username, Password)
        SetResponse(responseDataCode)
    }

    return (
        <div className={(!LogIn) ? 'App LogInScreen' : 'App'}>
            {!LogIn ? (
                <div className="LogInArea">
                    <h3>Log In</h3>
                    {Response}
                    <form className="LogInInputs" onSubmit={HandleSubmit}>
                        <input type="text" placeholder="Username" onChange={(e) => SetUsername(e.target.value)} />
                        <input type="password" placeholder="Password" onChange={(e) => SetPassword(e.target.value)} />
                        <button type="submit">Submit</button>
                    </form>

                    <p>Do you not have a account? <a href="">Let's create</a></p>
                </div>
            ) : (
                <div> Welcome User.Name</div>
            )}
        </div>
    );
}

export default App;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Invalid hook call inside function

2 Answers2