CODEWITHSUNDEEP
javascriptreactjs
pgmendormi
pgmendormi

Reputation: 224

My map gives me Cannot read properties of undefined (reading 'map')

I try to do a map of my differents people but it gives me the error on the title

I don't really understand and there is my code:


export const Testt = ({ childs}) => {
    console.log(childs)
    return childs.map((element, index) => (
        //element

        <div>
            zdijiziojzadioj
        </div>
    )
    )
    }

and there is my childs

(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {_id: '619e7301e74b007f5c62482d', firstName: '', lastName: '', birth: '2020-11-19', genre: 'male', …}
1: {_id: '619fae3c96f85d2415d8fe24', firstName: '', lastName: '', birth: '2021-11-03', genre: 'male', …}
2: {_id: '619fae5296f85d2415d8fe28', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
3: {_id: '619faec296f85d2415d8fe39', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
4: {_id: '619faee196f85d2415d8fe40', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
5: {_id: '619faf1496f85d2415d8fe4e', firstName: '', lastName: '', birth: '2021-11-04', genre: 'male', …}
...
length: 12

I don't understand where can be the problem, i already used the map but i have never had this problem,

Thanks for yours answer!

Upvotes: 1

Views: 76

Answers (1)

tomleb
tomleb

Reputation: 2525

Probably means that the value childs is not populated at the initial render.

What we usually do in React to circumvent this, is adding conditional statements.

This should do the trick -

export const Testt = ({ childs}) => {
    console.log(childs)
    return childs && childs.map((element, index) => (
        //element

        <div>
            zdijiziojzadioj
        </div>
    ))
}

Upvotes: 1

Related Questions