Rest API- React And AXIOS In Functional Component | Assign Axios Response To Function Component State

 This article will discuss correctly how to assign Axios response to react function component state and also will discuss how we can use Rest API React and AXIOS in the functional component.

we will parse Rest API responses with JSON using AXIOS in the functional component and then we will bind that data in an HTML table.

For that, you need to Make the Axios request inside the useEffect hook, in order to execute once the component is mounted.

Get data from Axios and return it from a Function Component in React

Dynamic data from API, i. e a request with Axios should be done within a useEffect hook, With the dependencies array empty []. so that the request in the useEffect hook will only happen in the first render. and when the response is received, store the result in a state and then Render the data based on the value of the state.

I have used the below API for showing you the example.

1.GET http://samplerestapi.com/api/Metadata/GetEmployees

Response Body

[
  {
"Id": 1,
"Name": "Pascale Cartrain",
"Address": "Rua do Mercado, 12",
"City": "Walla",
"ZipCode": "243232"
  },
  {
"Id": 2,
"Name": "Liu Wong",
"Address": "DaVinci",
"City": "Paris",
"ZipCode": "243232"
  },
  {
"Id": 3,
"Name": "Miguel",
"Address": "Avda. Azteca",
"City": "London",
"ZipCode": "243232"
  },
  {
"Id": 4,
"Name": "Anabela",
"Address": "ul. Filtrowa 68",
"City": "Florida",
"ZipCode": "243232"
  },
  {
"Id": 5,
"Name": "Mary Saveley",
"Address": "Adenauerallee",
"City": "Tokyo",
"ZipCode": "243232"
  },
  {
"Id": 6,
"Name": "Nik",
"Address": "DaVinci",
"City": "Tokyo",
"ZipCode": "2445432"
  },
  {
"Id": 7,
"Name": "Johny",
"Address": "Azteca",
"City": "London",
"ZipCode": "67643"
  }
]

Employeelist.js

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


const Employeelist = () => {
const [employeeslist, setemployees] = useState(null)
    useEffect(() => {
        getemployees()
    }, [])
const getemployees = () => {
            axios.get('http://samplerestapi.com/api/Metadata/GetEmployees').then(response => response.data).then(
                (result) => {
                    setemployees(result)
                },
                (error) => {
                    setemployees(null);
                }
              )
    }
if (!employeeslist) return (<div>No Record Found</div>)
return (<div>
        <h2>Fetch Employees List inside Funcational Component using axios</h2>
        <table className="table" >
            <thead>
                <tr>
                    <th>Employee Id</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>City</th>
                    <th>ZipCode</th>
                </tr>
            </thead>
            <tbody>
                {employeeslist.map(emp => (
                    <tr key={emp.Id}>
                        <td>{emp.Id}</td>
                        <td>{emp.Name}</td>
                        <td>{emp.Address}</td>
                        <td>{emp.City}</td>
                        <td>{emp.ZipCode}</td>
                    </tr>
                ))}
            </tbody>
        </table>
    </div>)
}
export default Employeelist;