title: Async/await not working with react js(hooks)
body: <p>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...</p>
  
  <p>Login.js</p>
  
  <pre><code>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) =&gt; {
          e.preventDefault();
          console.log(email, password);
          let res = await services.login(email, password);
          console.log(res);
      }    
  
      return (
          &lt;Container&gt;
              &lt;Row className="justify-content-md-center "&gt;
                  &lt;header&gt;&lt;h2&gt;Rao infotech workspace&lt;/h2&gt;&lt;/header&gt;
              &lt;/Row&gt;
              &lt;Row className="justify-content-md-center form"&gt;
                  &lt;Col md="auto"&gt;
                      &lt;Form onSubmit={handleClick}&gt;
                          &lt;Form.Group controlId="formBasicEmail"&gt;
                              &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                              &lt;Form.Control type="email" placeholder="Enter email" onChange={(e) =&gt; setEmail(e.target.value)} /&gt;
                          &lt;/Form.Group&gt;
  
                          &lt;Form.Group controlId="formBasicPassword"&gt;
                              &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                              &lt;Form.Control type="password" placeholder="Password" onChange={(e) =&gt; setPassword(e.target.value)} /&gt;
                          &lt;/Form.Group&gt;
                          &lt;Button variant="primary" type="submit" &gt;
                              Submit
              &lt;/Button&gt;
                      &lt;/Form&gt;
                  &lt;/Col&gt;
  
              &lt;/Row&gt;
          &lt;/Container&gt;
      );
  
  
  }
  
  export default Login;
  </code></pre>
  
  <p>services.js</p>
  
  <pre><code>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)=&gt;{
          console.log("res in service", res);
          return res;
      })
  }
  </code></pre>
  
  <p>I tried using useEffect but coudn't get how to call function inside useEffect()</p>