Render Array of Objects in React Native Flatlist

Question

Im currently having trouble with rendering an arary of objects into my react native flatlist.

This is my array:

const item = [
{
  "id": 59,
  "id_order": Object {
    "created": "23/08/2021 16:37:55",
    "direccion_extra": "codigo: 0592",
    "id": 39,
    "id_cliente": 35,
    "monto_pago_efectivo": null,
    "status": 1,
    "tipo_pago": 2,
  },
},
{
  "id": 58,
  "id_order": Object {
    "created": "23/08/2021 16:37:55",
    "direccion_extra": "codigo: 0592",
    "id": 39,
    "id_cliente": 35,
    "monto_pago_efectivo": null,
    "status": 1,
    "tipo_pago": 2,
  },
},
]

This is the Flatlist I am trying to render:

<FlatList
    data={item}
    renderItem={({ itemProduct, index }) => <ProductCard item={{itemProduct}} />}}
    keyExtractor={(item, index) => index.toString()}
/>

However, I cannot receive each of the array's objects in the ProductCard component. Any ideas are appreciated!

Horst · Accepted Answer · 2021-08-24 02:30:59Z

4

there is no itemProduct in renderItem function. It is called item(FYR).

You can rename it by

    renderItem={({ item: itemProduct, index })

BTW, the <ProductCard item={{itemProduct}} /> should use one {} only unless you want it to be wrapped in an object.

answered Aug 24, 2021 at 2:30

Horst

1,73915 silver badges21 bronze badges

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

Comments

Ashirbad Panigrahi · Accepted Answer · 2021-08-24 02:32:48Z

Items Array

const items = [
  {
    id: 59,
    id_order: {
      created: '23/08/2021 16:37:55',
      direccion_extra: 'codigo: 0592',
      id: 39,
      id_cliente: 35,
      monto_pago_efectivo: null,
      status: 1,
      tipo_pago: 2,
    },
  },
  {
    id: 58,
    id_order: {
      created: '23/08/2021 16:37:55',
      direccion_extra: 'codigo: 0592',
      id: 39,
      id_cliente: 35,
      monto_pago_efectivo: null,
      status: 1,
      tipo_pago: 2,
    },
  },
];

Flatlist

     <FlatList
        data={items}
        renderItem={({ item }) => ( 
          <View>
            <Text>{item.id}</Text>
          </View>
        )}
        keyExtractor={(item) => item.id}
      />

Note:

In FlatList renderItem you can't write itemProduct you have to write it as item

Collectives™ on Stack Overflow

Render Array of Objects in React Native Flatlist

2 Answers 2

Comments

Items Array

Flatlist

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Items Array

Flatlist

Comments

Your Answer

Sign up or log in

Post as a guest

Related