Within my React project I'm trying to use a map within a map however I'm unable to access the second set of data correctly. Each object can have multiple "spaces". When I try to map the spaces data I'm getting - Cannot read properties of undefined (reading 'map')

I have created the endpoint myself so I could change the structure if needs be.

{
 "title": "Libreria",
 "id": 23822,
 "link": "https://second-home.local/location/libreria/",
 "spaces": [
  {
   "title": "The Bookshop",
   "id": 475,
   "description": "A little labyrinth of literature.",
   "recommended": "Great for talks and launches",
   "capacity": "Up to 70 standing"
  }
 ]
}


 {locations.length > 0 ? (
                <div className="locations-listing__grid">
                    {locations.map((location) => (
                        <React.Fragment>
                            <div className="locations-listing__header">
                                <h2 className="locations-listing__title">{location.title}</h2>
                            </div>
                            {location.spaces.map((space, key) => (
                                <LocationCard
                                    key={key}
                                    location={location}
                                    space={space}
                                    title={space.title}
                                    id={space.id}
                                    link={space.link}
                                    image-url={space.image.url}
                                    description={space.description}
                                    recommended={space.recommended}
                                    capacity={space.capacity}
                                />
                            ))}
                        </React.Fragment>
                    ))}
                </div>
            ) : (
                <div className="locations-listing__no-results">
                    <h3>No locations found</h3>
                </div>
            )}

CodePudding user response：

The error is telling you that either locations is undefined here:

{locations.map((location) => (

Or location.spaces is undefined here:

{location.spaces.map((space, key) => (

Your debugging can confirm which of these is the case. In either event, if it's possible for the value to be undefined then the code needs to account for that. You can use optional chaining, for example:

{location.spaces?.map((space, key) => (

Or perhaps replace the value with an empty array when it's undefined:

{(location.spaces || []).map((space, key) => (

But either way, the error is simply telling you that you can't call .map() (or anything else for that matter) on a value that's undefined. (The same is true for values which are defined but null.)

Taking a step back... If the value shouldn't be undefined then you'd need to debug to find out why it is and why you expect otherwise. That problem would be upstream (or prior to) the problem in the question. The code/error in the question is simply not handling the possibility of undefined values.