React-Native Flatlist renderItem

Question

I have a array dictionary. I want to render all value to flatlist. I try:

renderItem = {({item}) => item.A.id}

But I don't return any value. Please help me. thanks

ArrAccount: {
  "A": [
    {
      "id": 1,
      "name": "Anh Tuan Nguyen",
      "age": 28
    },
    {
      "id": 2,
      "name": "An Nhien",
      "age": 2
    },
  ],
  "Z": [
    {
      "id": 3,
      "name": "Thanh Tu Pham",
      "age": 32
    },
    {
      "id": 4,
      "name": "Tien Thanh",
      "age": 24
    },
  ]
}

Answer 1

If your this.props.myArrayAccount field like this

this.props.myArrayAccount = {
        ArrAccount: {
          "A": [
            {
              "id": 1,
              "name": "Anh Tuan Nguyen",
              "age": 28
            },
            {
              "id": 2,
              "name": "An Nhien",
              "age": 2
            },
          ],
          "Z": [
            {
              "id": 3,
              "name": "Thanh Tu Pham",
              "age": 32
            },
            {
              "id": 4,
              "name": "Tien Thanh",
              "age": 24
            },
          ]
        }
      }

const myArrayAccount = this.props.myArrayAccount.ArrAccount
const ArrAccount = Object.keys(myArrayAccount).map((key)=> myArrayAccount[key])

because your props has more than one object inside it you should should map the object first than map the Flatlist component

you your data in FlatList component should like this:

{ArrAccount.map((item) =>
    <FlatList
      data={item}
      renderItem={({item}) => <Text>{item.name}</Text>}
    />
  )
}

Answer 2

You should use the renderItem like this:

renderItem = {({item:data}) => <Text>data.id</Text>}

And this will list all the ids.

Note: this style is so simple you can customize the style of items.