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
}
];
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'
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;