'.map is not function' error when get data from api in react

Question

I 'm new in react and I want to render my products data that I fetch from api. I'm using the map function to show the data I get from the api on the screen. But the following error appears in the console .There is no problem with the data, I can see that it is drawn from the api as console result, but it does not print on the screen in the form of a table, I think it will probably work if I solve the .map function problem. What can be the problem .Have you ever faced this problem ?

ERRORS

ProductList.js:27 Uncaught TypeError: products.map is not a function
The above error occurred in the <ProductList> component:

My ProductList

import { ProductContext } from '../Contexts/ProductContext';
import React, { useContext } from 'react';
import Product from './Product'

export default function ProductList() {

    const { products } = useContext(ProductContext);

    return (
        <>
            <div>


                <table className='table table-striped table-hover'>
                    <thead>
                        <tr>
                            <th>Product ID</th>
                            <th>product is offerable</th>
                            <th>Product Name</th>
                            <th>Product Description</th>
                            <th>Product is sold</th>
                            <th>Category ID</th>

                        </tr>
                    </thead>
                    <tbody>
                        <div>
                        {products.map((product) => (

                            <tr>
                                <td>{product.productId}</td>
                                <td>{String(product.isOfferable)}</td>
                                <td>{product.productName}</td>
                                <td>{product.productDescription}</td>
                                <td>{String(product.isSold)}</td>
                                <td>{product.categoryName}</td>
                            </tr>

                        ))}
                    </div>


                    </tbody>
                </table>
            </div>
        </>
    )


}

MY API DATA FROM POSTMAN

{
    "data": [
        {
            "categoryId": 1,
            "productId": 1,
            "productName": "Bilgisayar",
            "categoryName": "Yazılım",
            "colorName": "gri",
            "price": 15000,
            "brandName": "ASUS",
            "isOfferable": false,
            "isSold": false
        },                         // example data. it continues like this

If the data which you provided at last is the one you receive then try products.data.map(...) . — Maniraj Murugan
– Maniraj Murugan, Commented Aug 5, 2022 at 12:56
i did but this time it gave this error. "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" — NewPartizal
– NewPartizal, Commented Aug 5, 2022 at 13:01

PRSHL · Accepted Answer · 2022-08-05 13:01:31Z

1

You try to iterate over the the object and not the array inside the object. You have to use products.data.map(...). Also I would recommend optional chaining on your products object because you will try to access .data before products is fully fetched from the server. Therefore your products object will be undefined at first and you can't access .data on it.

{products?.data.map((data) => ...}

answered Aug 5, 2022 at 13:01

PRSHL

1,4531 gold badge14 silver badges35 bronze badges

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

Comments

Alaa Eddine Cherif · Accepted Answer · 2022-08-05 12:56:27Z

0

Do products.data.map() instead you skipped data which is the one containing the array

answered Aug 5, 2022 at 12:56

Alaa Eddine Cherif

2051 silver badge9 bronze badges

Collectives™ on Stack Overflow

'.map is not function' error when get data from api in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest