Displaying Markers in MapView fetched from Firestore Document

Question

Background

I'm trying to build a map view for an app using react-native-maps, I've got an amount of documents in a Firestore collection which have a latlng map field, which hold both latitude: and longitude:. The two of them are numeric values.

Problem

I am unable to get the markers to show in the map. I have been able to display a single static marker based on user location but cannot do it dinamically with data from Firebase. Code looks like this:

const [loading, setLoading]= useState(true)
    const [data, setData] = useState();
    
    useEffect(() => {
        const subscriber = firebase.firestore()
          .collection('data/')
          .onSnapshot(querySnapshot => {
            const data = [];
      
            querySnapshot.forEach(documentSnapshot => {
              data.push({
                ...documentSnapshot.data(),
                key: documentSnapshot.id,
              });
            });
            
            setData(data);
            setLoading(false)
            
          });

        return () => subscriber();
      }, [])

And then:

        <MapView
            initialRegion={text}
            style={styles.map}
            customMapStyle={mapStyle}
         >
             <Marker
             style={styles.marker}
             coordinate={{
               longitude: location ? currentLongitude : 0,
               latitude: location ? currentLatitude : 0
                        }}
               pinColor='#1FCFAB'
               title={'Vos'}
               description={'Vos'}
                        />
            {data.map((e, i) => {
            <Marker 
              key={i} 
              coordinate={e.latlng}
              title={e.name}
              pinColor='#5436FF'
              />
              
          })
        }
        </MapView>

If I go and print out either data or e, I get all the information from the doc. The latlng object is logged into the console this way:

Object {
  "latitude": -34.581626,
  "longitude": -58.439317,
}

I imagine that the inability of the markers to show up in the map comes from the word "Object" right there and the brackets. That's because the way the component expects you to input the data is:

coordinate={{latitude: latitude, longitude: longitude}}

How can I remove that? I've tried parsing it out to see what would happen but I get the following error message: JSON Parse error: Unexpected identifier "object". Of course, that's a no go.

Question

How can I convert the following snippet into data usable as latitude and longitude for react-native-maps:

Object {
  "latitude": -34.581626,
  "longitude": -58.439317,
}

Answer 1

I didn't get the second part, but before all that i can see you a making a minor mistake of not returning anthing from Marker's loop. You Code

  {data.map((e, i) => {
        <Marker 
          key={i} 
          coordinate={e.latlng}
          title={e.name}
          pinColor='#5436FF'
          />
          
      })
    }

Try Replacing

  {data.map((e, i) => (
        <Marker 
          key={i} 
          coordinate={e.latlng}
          title={e.name}
          pinColor='#5436FF'
          />))
    }