---
title: "Implement a function in React to render a list of items fetched from an API using Axios."  
description: "Implement a function in React to render a list of items fetched from an API using Axios."  
author: "Steilla Mitchel"  
published: 2023-07-26  
updated: 2023-07-27  
canonical: https://www.mindstick.com/forum/159293/implement-a-function-in-react-to-render-a-list-of-items-fetched-from-an-api-using-axios  
category: "javascript"  
tags: ["javascript", "reactjs"]  
reading_time: 1 minute  

---

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

Implement a [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server) in [React](https://www.mindstick.com/articles/327892/react-why-it-just-makes-sense-for-web-development) to [render](https://www.mindstick.com/interview/2205/why-we-need-a-separate-mobile-project-template-while-we-can-render-our-web-application-in-mobile-what-s-new-in-mvc-4-mobile-template) a list of [items](https://www.mindstick.com/forum/33812/getting-number-of-items-selected-in-uicollectionview-in-ios) fetched from an [API](https://www.mindstick.com/articles/12641/instagram-api-upgraded-to-facebook-graph) using Axios.

## Replies

### Reply by Aryan Kumar

Sure, here is an example of a function in React to render a list of items fetched from an API using Axios:

JavaScript

```plaintext
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 (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </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.


---

Original Source: https://www.mindstick.com/forum/159293/implement-a-function-in-react-to-render-a-list-of-items-fetched-from-an-api-using-axios

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.