React native Undefined is not a function (near '...data.map...')

Question

I'm making my first mobile application in React, where I have a map with rendered markers. Now I want the marker data to come from data I fetched from an Api. I want to write my own but to do a quick test I found one that has a lot of adresses in the Netherlands. I have two files: mapView and mapMarker. In my mapMarker file I have the following code to fetch the api data and map it in a marker key:

import React, {useState, useEffect} from 'react';


import { Marker }from 'react-native-maps'
import { View } from 'react-native';

function SupermarketList() {
    const [data, setData] = useState([]);

    useEffect( () => {
    fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', {
        headers: {
            'Cache-Control': 'no-cache',
        },
    })
    .then(response => response.json())
    .then(results => {
        setData(results);
        console.log(results);
    })
    .catch(error => console.error(error));
}, []);

const markers = data.map((supermarket, index) => {
    const lon = supermarket.lon
    const lat = supermarket.lat
    return (
        <Marker key={index} coordinate={{ lat, lon}}/>
    )
})

return (
    <View>
        {markers}
    </View>
)
}

export default SupermarketList
    

In my mapView.js I use the marker function like this:

<MapView style={styles.map} 
       initialRegion={{
        latitude: 51.926517,
        longitude: 4.462456,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      }}
    >
        <Marker coordinate={pin}
        draggable={true}
        onDragStart={(e) =>{
          console.log("Drag start", e.nativeEvent.coordinates)
        }}
        onDragEnd={(e) =>{
          setPin({
            latitude: e.nativeEvent.coordinate.latitude,
            longitude: e.nativeEvent.coordinate.longitude

          })
        }}
        >
          <Callout>
            <Text>I'm here</Text>
          </Callout>
        </Marker>
        <SupermarketList>
  
        </SupermarketList>
        <Circle center = {pin}
          radius = {1000}></Circle>
      </MapView>

Now to my problem: When I try to Test this code on my phone I get the following error: Render Error: undefined is not a function (near'..data.map...') and it points to const.markers = data.map((...etc) I tried googling this error but people with the same error seem to have completely different code. I have no idea what I am doing wrong or how I should fix this. Please help!

Answer 1

Your response returns an object instead of an array. The array which you want is placed within results.details . So in your code, after data is fetched it becomes an object and the map function won't work on that type of variable.

Just change:

    fetch('http://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json', {
    headers: {
        'Cache-Control': 'no-cache',
    },
})
.then(response => response.json())
.then(results => {
    //setData(results); original one
    setData(results.details); //changed one
    console.log(results);
})
.catch(error => console.error(error));

It should work.