Cannot access object entries using an object with FlatList react native

Question

The array I'm rendering contains an object with several entries that I tried rendering as demonstrated below

item.data it's because it's inside a parent array

<FlatList
  keyExtractor={(item) => item.software_name}
  extraData={state}
  data={Object.entries(item.data.workstation_software)}
  renderItem={({ item }) => (
    <Text style={[styles.h3, styles.mbs]}>{Object.entries(item).software_name}</Text>
  )}
/>

My data looks like that

room_workstations props: Object {
  "-MKLNv5HUu8ebCpdDvzb": Object {
    "workstation_hardware_brand": "Apple",
    "workstation_hardware_name": "MacBook Pro",
    "workstation_hardware_os": "Apple OS X 10.14",
    "workstation_software": Object {
      "-MKQxkmYczJOOa6W_Kp_": Object {
        "software_company": "Steinberg",
        "software_name": "Cubase",
        "software_type": Array [
          "Audio",
          "Online",
        ],
      },
      "-MKQy7l9uGBX2Am_lEtr": Object {
        "software_company": "Avid",
        "software_name": "Media Composer",
        "software_type": Array [
          "VFX",
          "Audio",
        ],
      },
      "-MKR21EP7OX2C8i4hSKJ": Object {
        "software_company": "Merging",
        "software_name": "Pyramix",
        "software_type": Array [
          "Audio",
        ],
      },
    },
  },
}

I can't seems to understad how to access inside variables to display on front-end I tried several attempts, so far I was able to display the index but not entries would show for me.

item by itself it gives me error

Objects not valid as a React child, found object with keys

Answer 1

You should first convert your main object into array of objects for your Flatlist to be accepted as a valid data.

For your specific case, Object.values can help like this:

// this can also be done in a useEffect hook
const processedData = Object.values(item.data.workstation_software);


return <FlatList
  keyExtractor={(item) => item.software_name}
  data={processedData}
  renderItem={({ item }) => (
    <Text style={[styles.h3, styles.mbs]}>{item.software_name}</Text>
  )}
/>