Input data given to 'points' is not a valid GeoJSON object - reactjs

Question

I want to populate some of the cooridnates what I get from the back end on mapbox map below is my sample json what I receive from backend
[
{
"model": "bike_parking_info.bikeparkinginfo",
"pk": 13561,
"fields": {
"start_station_id": 3276,
"start_station_name": "Marin Light Rail",
"start_station_latitude": "40.71458403535893",
"start_station_longitude": "-74.04281705617905",
"end_station_id": 3256,
"end_station_name": "Pier 40 - Hudson River Park",
"end_station_latitude": "40.7277140777778",
"end_station_longitude": "-74.01129573583603"
}
}
]
I have around 1200 objects to load from back end with coordinates
I am iterating it over below loop
let result = []
data.forEach(function (data1, index) {
//console.log(data1['fields']);
var jsonData={
// feature for Mapbox DC
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [
Number(data1['fields']['start_station_longitude']),
Number(data1['fields']['start_station_latitude']),
]
},
'properties': {
'title': data1['fields']['start_station_name']
}
}
result.push(jsonData);
export const mapDetails = state => state.getInfo.features;
this is how I am populating on UI
var map = new mapboxgl.Map({
container: mapContainer.current,
style: 'mapbox://styles/mapbox/light-v10',
center: [-96, 37.8],
zoom: 3
});
map.on('load', function () {
// Add an image to use as a custom marker
map.loadImage(
'https://docs.mapbox.com/mapbox-gl-js/assets/custom_marker.png',
function (error, image) {
if (error) throw error;
map.addImage('custom-marker', image);
// Add a GeoJSON source with 2 points
map.addSource('points', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': **mapDetails**
}
});
// Add a symbol layer
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'points',
'layout': {
'icon-image': 'custom-marker',
// get the title name from the source's "title" property
'text-field': ['get', 'title'],
'text-font': [
'Open Sans Semibold',
'Arial Unicode MS Bold'
],
'text-offset': [0, 1.25],
'text-anchor': 'top'
}
});
}
);
});
but I am getting below errors constantly
"Input data given to 'points' is not a valid GeoJSON object."
please help me out here what is going wrong ?

Answer 1

I got my fault I had to use useSelector to retrieve data back to my UI so had to make below changes
let dataToDisplay = useSelector(mapDetails);