Implement a function in React to render a list of items fetched from an API using Axios.

Question

Aryan Kumar · Answer

Sure, here is an example of a function in React to render a list of items fetched from an API using Axios:
JavaScript
import React, { useState, useEffect } from "react";
import axios from "axios";
const ItemList = () => {
  const [items, setItems] = useState([]);
  useEffect(() => {
    axios.get("https://api.example.com/items")
      .then((response) => {
        setItems(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);
  return (
    andlt;ul>
      {items.map((item) => (
        andlt;li key={item.id}>{item.name}andlt;/li>
      ))}
    andlt;/ul>
  );
};
export default ItemList;
This function first uses the useState hook to create a state variable that will store the list of items. The
useEffect hook is then used to fetch the list of items from the API. The
axios library is used to make the HTTP request. The then() method is used to handle the successful response, and the
catch() method is used to handle the error response.
The items state variable is then updated with the list of items from the API. The
ItemList component then renders a list of the items.

forum

Implement a function in React to render a list of items fetched from an API using Axios.

Steilla Mitchel

Can you answer this question?

1 Answers

Liked By