How to integrate axios api in react js with async and await using react hooks

Question

I have the following code in signin.js and I am using Axios API to integrate it with the code so that it redirects to the dashboard. I have the following URL for API (https://9d6e-110-44-127-177.ngrok.io/auth/login/) and email that is verified is "m@m.com" and password is admin@123 but I don't know how to integrate with the code. The code for signin.jsx is as below: signin.jsx

import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'


const Container = styled.div`

display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
height: 80vh;
width: 30vw;
background: #E8E8E8;

`;

const Welcome = styled.h2`
  
   margin: 3rem 0 2rem 0;
   box-sizing: border-box;
   background-color: #00009c;
   border: 2px solid #00009c;
   border-radius: 2rem;
   padding: 15px;
   text-transform: uppercase;
   color: white;
   letter-spacing: 0.4rem;
`;

const Form = styled.form`
width: 100%;
  height: 100vh;
  
  justify-content: center;
  align-items: flex-start;
`;



const Input = styled.div`
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
height:20%;
width: 100%;
` ;

const Button = styled.div`
margin: 1rem 0 2rem 0;
width: 90%;
display: flex;
align-items: center;
justify-content: center;

`;

const Paragraph = styled.p`
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
`;

const Check = styled.input`
font-size: 15px;
margin-left: -400px;
box-sizing: border-box;
`;

const Label = styled.label`
margin-top: -120px;
margin-left: -270px;

`;




const Signin = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const  handleSubmit = (e) => {
        e.preventDefault()
        axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
            email: "m@m.com",
            password: "admin@123"
        })
            .await((response) => {
                console.log(response)
                
                
            })
        
            .catch((err) => {
                console.log(err)
                alert(err.response.data.error.message)
         })
    }

   const handleEmail = (e) => {
        setEmail(e.target.value)
    }

  const  handlePassword = (e) => {
        setPassword(e.target.value)
    }
    
        
    
    return (
        <Container>
            <Welcome>
                Welcome
            </Welcome>
            <Form onSubmit= {handleSubmit}>
         
                <Input>
                    <StyledInput type="email"
                        placeholder="Email"
                        required
                        value={email}
                        onChange = {handleEmail}
                    />
                </Input>
              
               
                <Input>
                    <StyledInput type="password"
                        placeholder="Password"
                        required
                        value={password}
                        onChange = {handlePassword} />
                </Input>
                <Input>
                    <Check type="checkbox" />
                    <Label>Remember me</Label>
                </Input>
                 <Link to = "dashboard">
                <Button onLink = {handleSubmit}>
                    <StyledButton content = "Log in" />
                    </Button>
                    </Link>
                <Paragraph>
                Don't have an account?
                <Link to = "register">Sign up</Link>
            </Paragraph>
            </Form>
           

        </Container>
    );
            
}

export default Signin

I also want to use async await in the sign in. How can that be done?

Answer 1

import React, {useState} from 'react'
import styled from 'styled-components'
import StyledInput from './StyledInput'
import StyledButton from './StyledButton'
import { Link } from 'react-router-dom'
import './Signin.css'
import axios from 'axios'


const Signin = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const  handleSubmit = async () => {
        e.preventDefault()
        await axios.post("https://9d6e-110-44-127-177.ngrok.io/auth/login/", {
          email : email,
          password : password
        }).then((res) => {
           if(res.data.email === "m@m.com" && res.data.password === "admin@123")
        }).catch((err) => {
              console.log(err) ;
         })
    }

   const handleEmail = (e) => {
        setEmail(e.target.value)
    }

  const  handlePassword = (e) => {
        setPassword(e.target.value)
    }
    
        
    
    return (
        <Container>
            <Welcome>
                Welcome
            </Welcome>
            <Form onSubmit= {handleSubmit}>
         
                <Input>
                    <StyledInput type="email"
                        placeholder="Email"
                        required
                        value={email}
                        onChange = {handleEmail}
                    />
                </Input>
              
               
                <Input>
                    <StyledInput type="password"
                        placeholder="Password"
                        required
                        value={password}
                        onChange = {handlePassword} />
                </Input>
                <Input>
                    <Check type="checkbox" />
                    <Label>Remember me</Label>
                </Input>
                 <Link to = "dashboard">
                <Button onLink = {handleSubmit}>
                    <StyledButton content = "Log in" />
                    </Button>
                    </Link>
                <Paragraph>
                Don't have an account?
                <Link to = "register">Sign up</Link>
            </Paragraph>
            </Form>
           

        </Container>
    );
            
}

export default Signin

Answer 2

Here is how you use async await which is more readable.

 const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      let response = await axios.post(
        "https://9d6e-110-44-127-177.ngrok.io/auth/login/",
        {
          email: "m@m.com",
          password: "admin@123",
        }
      );
      console.log(response);
    } catch (error) {
      console.error(error);
    }
  };

Answer 3

   .await((response) => { // not await, it should be then
       console.log(response)
   })

should be "then" instead

.then((response) => {
     console.log(response)
})