Return JSON data based on index in React FlatList

Question

I'm trying to return just the first fruit/color data from this read-only example JSON:

"start": 0,
"limit": 1,
"filteredSize": null,
"results": [
    {
        "id": 20587193,
        "fruit": "apple",
        "color": "red",
    },
    {
        "id": 20587191,
        "fruit": "banana",
        "color": "yellow",
    }
]

Using a FlatList in React Native:

<FlatList
data={data.results}
keyExtractor={({ id }, index) => id.toString()}
renderItem={({ item }) => (
<exampleComponent
fruitData={item.fruit}
colourData={item.color} />
)}
/>

Here is my API call:

fetch('http://localhost:8080/login', headers)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

However, the above returns both fruits and colors:

apple, red
banana, yellow

I'm aware I need to access the index of the first element of data.results but I'm not sure where to put this in my code.

If I add in a console.log of data.results as a chained .then as follows:

fetch('http://localhost:8080/login', headers)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .then(function(){
        console.log("dataResults: " + data.results)
      })
      .finally(() => setLoading(false));
  }, []);

For some reason it calls 3 times, but the first time is undefined, so perhaps this is the reason I am having trouble:

console.log output:

dataResults: undefined
dataResults: [object Object],[object Object]
dataResults: [object Object],[object Object]

Many of my attempts return a TypeError: Cannot read property '0' of undefined error, such as changing the console.log call to be:

console.log("dataResults: " + data.results[0])

Update

I now know that the console.log is being called multiple times because useEffect is being re-rendered, and not that useEffect is being called multiple times itself.

However, I still don't understand why I can't access data.results to filter, but I can access data.results to use it as a whole?

How can I edit the data array before using it in my FlatList?

Answer 1

It turns out, when accessing nested parts of JSON, the data was returning as an object rather than an array, but Flatlist expects an array.

I found this answer on S.O. (https://stackoverflow.com/a/43969184) meaning I simply needed to do the following:

if(data.results != undefined){
      var fruitArray = Object.entries(data.results)
}

I still don't think I am using state correctly, hence the if(data.results != undefined) control, but it is at least working for now.

This means I can now access a single fruit using firstFruitName = fruitArray[0][1]