How is it better to show list of items using locations.map()-CodePudding

I have a problem, connected with photo.locations.map is not a function, I'm trying to show the list of items:

{photo.locations.map((location) => (
  <MenuItem
   key={location.id}
   value={location.name}
  >
   {location.name}
  </MenuItem>
))}

Tryied to find a mistake in my project, but all is success, only this one is crashing my project...

There is something in the Network:

{locations: [,…]}

locations
: 
[,…]
0
: 

{id: 1, name: "qfqfqf", createdAt: "2022-11-03T18:12:02.174Z", updatedAt: "2022-11-03T18:12:02.174Z"}
1
: 

{id: 2, name: "йайайайа", createdAt: "2022-11-03T18:19:17.210Z", updatedAt: "2022-11-03T18:19:17.210Z"}
2
: 

{id: 3, name: "Брест", createdAt: "2022-11-03T18:33:18.335Z", updatedAt: "2022-11-03T18:33:18.335Z"}
3
: 

{id: 4, name: "Минск", createdAt: "2022-11-03T18:33:23.103Z", updatedAt: "2022-11-03T18:33:23.103Z"}
4
: 
{id: 5, name: "Гродно", createdAt: "2022-11-03T18:33:27.483Z", updatedAt: "2022-11-03T18:33:27.483Z"}

CodePudding user response：

Try using conditional rendering:

{phone.locations && <Your code>}

I think your code crashes because React tries to render the list before your data is available. Now it will check if the data is available and when it's available it will render the list.