Struggling to map an array of objects in react

August 6, 2022

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.

>Solution :

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.)