Async/await not working with react js(hooks)

Question

I am trying to create a react application in which I am using react hooks. In login form when the user submits the form email and password are passed to handleClick function. That function fetches the data from the server and displays on client side but the response is always undefined and being called before return from service. Here is the code...

Login.js

import React, { useState, useEffect } from 'react';
import { Button, Form, Container, Row, Col } from 'react-bootstrap';
import './login.css'
import * as services from '../services'

function Login() {

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const handleClick = async(e) => {
        e.preventDefault();
        console.log(email, password);
        let res = await services.login(email, password);
        console.log(res);
    }    

    return (
        <Container>
            <Row className="justify-content-md-center ">
                <header><h2>Rao infotech workspace</h2></header>
            </Row>
            <Row className="justify-content-md-center form">
                <Col md="auto">
                    <Form onSubmit={handleClick}>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Label>Email address</Form.Label>
                            <Form.Control type="email" placeholder="Enter email" onChange={(e) => setEmail(e.target.value)} />
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Password</Form.Label>
                            <Form.Control type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
                        </Form.Group>
                        <Button variant="primary" type="submit" >
                            Submit
            </Button>
                    </Form>
                </Col>

            </Row>
        </Container>
    );


}

export default Login;

services.js

import axios from "axios";
const baseUrl = "http://localhost:4000/"; 

export function login(email, password) {
    var body = {email: email, password: password}
    axios.post(baseUrl + 'user/login', body)
    .then((res)=>{
        console.log("res in service", res);
        return res;
    })
}

I tried using useEffect but coudn't get how to call function inside useEffect()

Solution 1

You need to return your loginfunction:

export async function login(email, password) {
    var body = {email: email, password: password}
    return axios.post(baseUrl + 'user/login', body)
    .then((res)=>{
        console.log("res in service", res);
        return res;
    })
}

Or simply:

export async function login(email, password) {
    var body = {email: email, password: password}
    return axios.post(baseUrl + 'user/login', body);
}

Solution 2

import axios from "axios";
const baseUrl = "http://localhost:4000/"; 

export function login(email, password) {
 var body = {email: email, password: password}
 return new Promise((resolve, reject) => {
   axios.post(baseUrl + 'user/login', body)
  .then((res)=>{
    console.log("res in service", res);
    return resolve(res);
    });
  })
}

Just create the promise in service your async/await will start working.

Comments

[Shubham]

You are not using async and await for login function. You need to return promise from login function. You can directly return axios without resolving it there

[Obaid ullah Khan]

Thanks Arronical.. But the issue i am facing is when i am accessing tables using phpmyadmin some times i am able to open tables and alter them... and some time its giving 500 internal error so still tried with some permission change and forgot default.. But still 500 internal issue there same if nay one help regarding that Thanks

[Shubham]

No need to await axios in login function

[Shubham]

axios itself is returning a promise. Why not return it directly?

[Charanjeet Singh]

Yes you can return it directly though, the above code is if you want to use the .then callback.