How to display all items from an API in React JS?

Question

Below is my code, in this I want to add code to display all the products with its image from an API, how can I do that? Please help?

import React, {useState, useEffect} from 'react'
import "bootstrap/dist/css/bootstrap.min.css"
import Axios from "axios"

function Products() {

const [products, setProducts] = useState({});

const fetchProducts = async () => {
const {data} = await Axios.get('https://api.test.ts/demo/test');  
const products= data
setProducts(products);
};

useEffect(() => {

  fetchProducts()

 }, []);

 return(
     
     <div>
         Want to Display list of products from API
     </div>
 )

}

export default Products;

can you tell me what is problem? Your problem is that you dont know how to get products data and use it in Webhook? Or you dont know how to show data in JSX in React? — development-ninja
– development-ninja, Commented Nov 30, 2020 at 20:14

Ketan Ramteke · Accepted Answer · 2020-12-01 09:00:58Z

5

I tried your URL for fetching products but it is showing as not reachable so I have coded this simple app using https://jsonplaceholder.typicode.com API of the list of todos.

Hope this example helps you understand how to fetch and display items from fetched data.

import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";

function App() {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const { data } = await Axios.get(
      "https://jsonplaceholder.typicode.com/todos/"
    );
    const products = data;
    setProducts(products);
    console.log(products);
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  return (
    <div>
      {products.map((product) => (
        <p key={product.id}>{product.title}</p>
      ))}
    </div>
  );
}

export default App;

CodeScandbox Link

Here is another example, where the returned data is in the form of an object instead of an array in the above Example:

import React, { useState, useEffect } from "react";
import "./styles.css";
import Axios from "axios";

const productsData = {
  note: "",
  notification: "",
  Books: [
    {
      bookID: 65342,
      img: "https://source.unsplash.com/200x300/?book",
      year: 2018,
      bookTitle: "Story Time",
      LibraryInfo: {
        Status: "Out",
        returnDate: "7 Jan"
      }
    },
    {
      bookID: 65332,
      img: "https://source.unsplash.com/200x300/?book",
      year: 2018,
      bookTitle: "Story Time",
      LibraryInfo: {
        Status: "Out",
        returnDate: "7 Jan"
      }
    }
  ]
};
export default function App() {
  const [products, setData] = useState(productsData);
  const [toggle, setToggle] = useState({});
  useEffect(() => {
    setData({});
    Axios.get("https://stylmate1.firebaseio.com/hair.json").then((response) => {
      // console.log(response.data);
      setData(productsData);
    });
  }, [toggle]);
  return (
    <div className="App">
      {/* <button onClick={() => setToggle(!toggle)}>fetch</button> */}
      {products?.["Books"]?.length &&
        products["Books"].map((product) => (
          <div key={Math.random() * 10000}>
            <img src={product.img} width="200" alt="" />
            <p>{product.bookTitle}</p>
            <p>{product.year}</p>
            <p>
              {"Library Status: " +
                product.LibraryInfo.Status +
                "\n" +
                product.LibraryInfo.returnDate}
            </p>
            <p></p>
          </div>
        ))}
    </div>
  );
}

Here is the Codesandbox Example Showing how to Render elements from JSON data returned in the form of the object instead of Array Like the above example

edited Dec 1, 2020 at 9:00

answered Nov 30, 2020 at 20:28

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Adriano Machado Over a year ago

You forgot to use "key" prop.

mzk Over a year ago

showing :- TypeError: products.map is not a function. Need to fetch from an object, so .map can work here?

Ketan Ramteke Over a year ago

you can convert Object to Array with Object.entries() and use that array to map through it

Ketan Ramteke Over a year ago

if possible, share the api url so that I can see the data it is returning, then only I can give the exact answer

Ketan Ramteke Over a year ago

or paste the data that is being returned from Axios get request

|

Pr0grammer X · Accepted Answer · 2020-12-01 14:18:22Z

1

   return (
     <div>
       {products.map((product, index) => (
        <p key={index}>{product.title}</p>
       ))}
     </div>
   );

It's recommended to have a product id, instead of using the array index as a key prop.

   return (
     <div>
       {products.map(({ id, title }) => (
        <p key={id}>{title}</p>
       ))}
     </div>
   );

That 'key' prop helps React detect & change the modified items using their unique 'key' prop.

edited Dec 1, 2020 at 14:18

answered Nov 30, 2020 at 20:40

Pr0grammer X

655 bronze badges

2 Comments

mzk Over a year ago

showing :- TypeError: products.map is not a function. Need to fetch from an object, so .map can work here?

Pr0grammer X Over a year ago

that is because your 'products' variable is null, you can see that by console.loging the data variable you received after you fetched the api, try to check if you fetched correctly.

Collectives™ on Stack Overflow

How to display all items from an API in React JS?

2 Answers 2

12 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related