how to fetch array with map from other js file in react?-CodePudding

I want to fetch array from the product file but it is showing 'Uncaught TypeError: _product__WEBPACK_IMPORTED_MODULE_1___default(...).map is not a function' I have even tried using key in Col but still it is showing the same. My react code is

import product from '../product'

export default function HomeScreen() {
    return (
        <>
            <h1>Latest Products</h1>
            <Row>
                {product.map((products)=>(
                    <Col sm={12} md={6} lg={4} xl={3}>
                        <h3>{products.name}</h3>
                    </Col>
                ))}
            </Row>
        </>
    )
}

and product file is

const product=[
    {
        _id:'1',
        name : 'Shoes',
        images : './img.shoe4.jfif',
        discription : 'Lorem10j,jdscjscjc nxkd kdn ddksad asdkjdhsadb',
        brand : 'Apple',
        category : 'Electronics',
        price : 89.3,
        countInStocks : 3,
        rating: 4.5,
        numReviews: 4
    }  

];

CodePudding user response：

the actual problem is that the product in your HomeScreen is not an array, seems like you are not exporting your product array from its file,

it should be like this :

//don't forget the export keyword if you want to access it outside this file
const product=[
    {
        _id:'1',
        name : 'Shoes',
        images : './img.shoe4.jfif',
        discription : 'Lorem10j,jdscjscjc nxkd kdn ddksad asdkjdhsadb',
        brand : 'Apple',
        category : 'Electronics',
        price : 89.3,
        countInStocks : 3,
        rating: 4.5,
        numReviews: 4
    }  
];
export default product;

CodePudding user response：

You have to export products from your products file.

Either use default export:

export default product;

and use the following import:

import product from '../product';

or use a named import:

export const product = [{ ... }]

and import the named const:

import { product } from '../product'