API Call In React JS using Axios [ React Form Submit To API ]

 Step 1 : npm i axios.

 Step 2 : Create form with email and password.

 Step 3 : create state to store email and password.

 Step 4 : Store the value in state using onChange method. 

 Step 5 : Call the Api with data stored in state. 

 Step 6 : Handle Error and Success. 

 App.js Code below :

import { useState } from "react";

import './App.css';

import axios from "axios";

function App() {

  const [email, setEmail] = useState('')

  const [password, setPassword] = useState('')

  console.log({ email, password })

  const handleEmail = (e) => {

    setEmail(e.target.value)

  }

  const handlePassword = (e) => {

    setPassword(e.target.value)

  }

  const handleApi = () => {

    console.log({ email, password })

    axios.post('https://reqres.in/api/login', {

      email: email,

      password: password

    }).then(result => {

      console.log(result.data)

      alert('success')

    })

      .catch(error => {

        alert('service error')

        console.log(error)

      })

  }

  return (

    <div className="App">

      Email : <input value={email} onChange={handleEmail} type="text" /> <br />

      Password : <input value={password} onChange={handlePassword} type="text" /> <br />

      <button onClick={handleApi} >Login</button>

    </div>

  );

}

export default App;

Check Video on Youtube :