Struggling to map an array of objects in react-CodePudding

I'm fetching data from backend, and I want to map everything. However I am struggling to render an array of objects . TypeError: Cannot read properties of undefined (reading 'cargoType')

Anyways, here's my code.. I tried to map it in a few different ways such as

  const displayDashboard = bookings?.map((booking: BookingInterface, index) => (
    <Text key={index}>{Object.values(booking?.pallets[index].cargoType)}</Text>
));

<Text key={index}>{booking.pallets.cargoType}</Text> (seems to return nothing) and a few other ideas that came to my mind like: booking.pallets[index].cargoType returns 'cannot read properties of undefined'. HOWEVER, I am unable to get any data, except if I do Object.values(booking?.pallets[index] I receive an array of indexes like so: 01234

Here's how the data looks like (took out a few other entries besides 'pallets' to make it look cleaner):

0:
pallets: Array(5)
0: {cargoType: 'Engines & spare parts', stackable: false, cargoValue: '6092', count: '2', dangerous: false, …}
1: {cargoType: 'Furniture and accessories/Ceramics', stackable: false, cargoValue: '16485', count: '2', dangerous: false, …}
2: {cargoType: 'Engines & spare parts', stackable: false, cargoValue: '6879', count: '2', dangerous: false, …}
3: {cargoType: 'New Vehicles', stackable: false, cargoValue: '19980', count: '4', dangerous: false, …}
4: {cargoType: 'Industrial products', stackable: false, cargoValue: '9516', count: '2', dangerous: false, …}
length: 5
[[Prototype]]: Array(0)

1:
pallets: Array(4)
0: {cargoType: 'Chemicals & healthcare', stackable: false, cargoValue: '5741', count: '3', dangerous: false, …}
1: {cargoType: 'Old Vehicles', stackable: false, cargoValue: '18877', count: '2', dangerous: false, …}
2: {cargoType: 'Paperboard & prints', stackable: false, cargoValue: '6841', count: '1', dangerous: false, …}
3: {cargoType: 'Chemicals & healthcare', stackable: false, cargoValue: '7558', count: '1', dangerous: false, …}
length: 4
[[Prototype]]: Array(0)

Not really sure why isn't it rendering any data back. I was hoping to get it going with a simple booking.pallets.cargoType, but no - everything renders except this line. I believe that I am targeting the data improperly, but I ran out of ideas on how to get it to show up.

CodePudding user response：

You have an array of objects. Each object has multiple properties. One of those properties is an array. That is not the same array.

Basically, you need a loop (or .map()) for the array of bookings, and for each booking you need a loop (or a .map()) for the array of pallets. The structure is the same, one is just inside the other.

For example:

const displayDashboard = bookings?.map((booking, bi) => (
  <React.Fragment key={bi}>
    {booking?.pallets?.map((pallet, pi) => (
      <Text key={pi}>{pallet?.cargoType)}</Text>
    ))}
  </React.Fragment>
));

(Wrapped in a Fragment so we can apply a key without changing the markup. If you want to group the values in the markup, a <div> or any other such element would work just as well.)