Struggling to map an array of objects in react

Question

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.

You're using the current index of bookings to reference booking.pallets. What guarantee do you have that pallets will always have at least as many elements as that booking's index? For example, if the booking at index 4 has a pallets array with 3 elements, then clearly pallets[4] will fail. It's not really clear to me what you're expecting to output here. — David
– David, Commented Aug 6, 2022 at 14:18
well, I want to output the value from 'cargoType' - regardless of how many entries there are.. i want all of them — Mateusz Szumilo
– Mateusz Szumilo, Commented Aug 6, 2022 at 14:20
my guess is that I should map ``` booking.pallets.map(x => ( x.cargoType ) ``` - what do you think about this solution ? — Mateusz Szumilo
– Mateusz Szumilo, Commented Aug 6, 2022 at 14:24

David · Accepted Answer · 2022-08-06 14:24:10Z

1

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

answered Aug 6, 2022 at 14:24

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mateusz Szumilo Over a year ago

I was just thinking that when you answered initially. Thank you! Appreciate you taking the time to understand and help me out. Wish you all the best!

Collectives™ on Stack Overflow

Struggling to map an array of objects in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related