I am trying to render leaflet markers using React Leaflet with data fetched from an API using useEffect. The markers are not showing up despite the location data being non-null at the time of declaring the marker (supposedly, through the use of conditional rendering, though I'm not so sure anymore).
The code for the useEffect:
const [arr, setArr] = React.useState([]);
const [dataLoaded, setDataLoaded] = React.useState(false);
useEffect(() => {
axios.get('http://localhost:8000/get-data/')
.then(res => {
if (res.data) {
const data = res.data
for (let i = 0; i < data.length; i++) {
arr.push(data[i])
}
}
})
.then(res => {
if ( arr.length > 0) {
setDataLoaded(true)
}
})
}, [])
The code for rendering the markers:
{ dataLoaded ? console.log(arr[0].latitude, arr[0].longitude) : null}
{ dataLoaded ? <Marker position={[parseFloat(arr[0].latitude), parseFloat(arr[0].longitude)]}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
</Popup>
</Marker> : <></> }
This is an example of me trying to render the first set of coordinates from my data array. I included the console logs for debugging, which output the values 36.77 & -199.41 for the latitude and longitude respectively. These are the same variables being used for the marker's position. For some reason, though, the marker does not show up on my map. If I enter the values [36.77, -119.41] directly into its position, then the marker does show up. Any ideas on why this is happening?
Edit: here is a screenshot of my data array after being filled.
