Correct way to populate 45k elements into attribute in React

Question

I have 45k objects of cordinates in JSON format and I want to put them as markers in my map component.

I have the following code:

const MapWithMarkers = withGoogleMap(props =>GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
);

<MapWithAMarker
  containerElement={<div style={{ height: '400px' }} />}
  mapElement={<div style={{ height: '100%' }} />}
/>

How can that be achieved in the most correct way?

Thanks for your time.

Answer 1

Pass down the data as a prop into the map component, then in the map component, pick up the data from the props and .map over it and generate a marker for every entry.

<GoogleMap>

        {
            (props.markerData).map((marker, i) => {return <Marker key={i} position={{ lat: parseFloat(marker.lat), lng: parseFloat(marker.lng) }} />})
        }

</GoogleMap>