In this below code, I get an error like this:
TypeError: Cannot read property 'products' of undefined
at ClosetSpotlightItems (E:\AAAAAA\Susty\Z\Forked for Deploy\susty-next-fronted-fork\.next\server\chunks\621.js:606:30)
can you help me to solve this error ???
I have already tried adding AND operator before the mapping ( {seller.products && seller.products.map((item) => () and also a key as well (<div key={item.id}>).
Please help me make this error fix, and also this happens when I run the build in my NEXT.js project.
import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'
const ClosetSpotlightItems = ({seller}) => {
return (
<>
<ClosetSpotlightWrapper seller={seller} key={seller._id}>
{seller.products.map((item) => (
<div key={item}>
<ClosetSpotlightItemCard item={item}/>
</div>
))}
</ClosetSpotlightWrapper>
</>
)
}
export default ClosetSpotlightItems
I would just early out the ClosetSpotlightItems function if seller is undefined. Seller is undefined in your case at some point in time.
I've also set your default export at the bottom to a named export. This prevents a lot of problems in the future for your codebase: https://basarat.gitbook.io/typescript/main-1/defaultisbad
import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'
export const ClosetSpotlightItems = ({seller}) => {
if (seller === undefined) return null
return (
<>
<ClosetSpotlightWrapper seller={seller} key={seller._id}>
{seller.products.map((item) => (
<div key={item}>
<ClosetSpotlightItemCard item={item}/>
</div>
))}
</ClosetSpotlightWrapper>
</>
)
}
Do this like, Encode your Object in if Condition and check whether it have data or not
import React from 'react'
import ClosetSpotlightWrapper from '../layouts/ItemRows/ClosetSpotlightWrapper'
import ClosetSpotlightItemCard from '../Cards/Item/ClosetSpotlightItemCard'
const ClosetSpotlightItems = ({seller}) => {
return (
<>
<ClosetSpotlightWrapper seller={seller} key={seller._id}>
{ (seller.products) && seller.products.map((item) => (
<div key={item}>
<ClosetSpotlightItemCard item={item}/>
</div>
))}
</ClosetSpotlightWrapper>
</>
)
}
export default ClosetSpotlightItems
You can use a ? to skipp the undefined values
{
seller?.products?.map((item) => (
<div key={item}>
<ClosetSpotlightItemCard item={item}/>
</div>
))}