TypeError: Cannot read property 'products' of undefined

user_10506370 0
Viewed 55

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
next.js reactjs arrays javascript
3 Answers

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>
        </>
    )
}
user_16307890

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
user_144139130

You can use a ? to skipp the undefined values

{
seller?.products?.map((item) => (
                <div key={item}>
                    <ClosetSpotlightItemCard item={item}/>
                </div>
            ))}
user_191881880
Related