I am building an app using react native, it has a map screen which displays custom markers, the markers are stored on a firbase I created the function to fetch the data and store it into the state using an useEffect hook but it seems that the state is only storing half of it
import React, { useEffect, useState } from 'react'
import { Container, StyledMapView } from './MapScreen.styles'
import { CustomMarker, useMapScreen } from './useMapScreen'
import { RoundButton } from '../../components/RoundButton'
import { MapSearchBar } from '../../components/MapSearchBar'
import { DestinationModel } from '../../components/DestinationModel'
import { Hamburger } from '../../components/Hamburger'
import { Marker } from 'react-native-maps'
import { MarkerCard } from '../../components/MarkerCard'
import { retrieveData } from '../../storage/firestore/LocationReader'
export const MapScreen = () => {
const [fetchedData, setFetchedData] = useState<CustomMarker[]>([])
useEffect(() => {
const fetchDataAndStoreInState = async () => {
const data = await retrieveData();
console.log(data)
console.log("DATA PRINTED")
setFetchedData(data)
console.log(fetchedData)
};
fetchDataAndStoreInState();
}, []);
const { models, operations } = useMapScreen()
return (
<Container>
<StyledMapView
ref={models.mapRef}
showsUserLocation
// onUserLocationChange={operations.handleUserLocationChange}
showsMyLocationButton={true}
>
{fetchedData &&
fetchedData.map((marker) => {
console.log(models.selectedId)
if (
marker &&
marker.location &&
marker.location.latitude !== undefined &&
marker.location.longitude !== undefined &&
marker.event_name &&
marker.event_desc &&
models.selectedId !== undefined &&
(models.selectedId == marker.event_type)
) {
console.log(marker.event_name)
return (
<Marker
key={marker.id}
coordinate={{
longitude: marker.location.longitude,
latitude: marker.location.latitude,
}}
title={marker.event_name}
description={marker.event_desc}
// Assuming 'image' is a URL object
image={marker.image}
onPress={() => operations.setSelectedMarker(marker)}
/>
);
}
return null;
})}
{models.markerCard &&
models.selectedMarker &&
<MarkerCard
closeMarkerCard={operations.closeMarkerCard}
disabled={models.markerCard}
marker={models.selectedMarker}
/>
}
</StyledMapView>
<RoundButton icon="ios-menu-outline" onPress={operations.closeHamburger} />
<MapSearchBar onPress={operations.handleMapSearchBarPress} />
<DestinationModel visible={models.modelVisible} closeModel={operations.closeDestinationModel} />
<Hamburger disabled={models.hamVisible} closeHam={operations.closeHamburger} />
</Container>
)
}
This is not good code, I am using react native for the first time. Any help is apprecieted
I have been trying to use different ways to store it on to the state, like making the state in another file or checking if the state has the required number of entires before rendering but all is failing