React Native Props Not Saving into New Array - arrays

Question

I am passing props to a nested component. The props are coming in correctly but I am unable to pass them to a new array like so:
import React, {useState, useEffect} from 'react';
import {StyleSheet, View} from 'react-native'
import MapView, {Marker} from 'react-native-maps';
const Map = ({navigation, locationsOne, locationsTwo, locationsThree}) => { //these are coming in correctly when I console.log ie: {"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}
const [markers, setMarkers] = useState([
{
location : locationsOne,
title: 'One'
},
{
location : locationsTwo,
title: 'Two'
},
{
location : locationsThree,
title: 'Three'
}
]);
return (
<MapView style={styles.map} initialRegion={currentLocation.coords}>
{markers.map((locationTEST) => (
console.log('location: ' + JSON.stringify(locationTEST)) //this returns nothing in the locations arrays ie: {"location":[],"title":"One"}
<MapView.Marker
title="This is a title"
description="This is a description"
coordinate={{
latitude: locationTEST.location.coords.latitude,
longitude: locationTEST.location.coords.longitude,
}}
/>
))}
</MapView>
);
the value of locationsOne looks like: {"coords":{"accuracy":602,"altitude":0,"heading":0,"latitude":99.4210083,"longitude":-100.0839934,"speed":0},"mocked":false,"timestamp":1572363100628}
How come I can't take the props and pass it into a new array (markers) array?

Answer 1

When <Map/> rendered at the first time, locationsOne still contain [].
When props (means locationsOne changed), state didn't changed.
So you should useEffect to update state when props changed.
const [markers, setMarkers] = useState ...
useEffect(() => {
const newMarkers = [
{
location : locationsOne,
title: 'One'
},
{
location : locationsTwo,
title: 'Two'
},
{
location : locationsThree,
title: 'Three'
}
];
setMarkers(newMarkers);
}, [locationsOne, locationsTwo, locationsThree]);

Answer 2

Rather then setting the useEffect callback array [] (this was bogging down the system as this re-runs the locations every time they change which was causing the locations to be called 1400 times), I just needed to setMarkers() like so:
useEffect(() => {
const newMarkers = [
{
location : locationsOne,
title: 'One'
},
{
location : locationsTwo,
title: 'Two'
},
{
location : locationsThree,
title: 'Three'
}
];
setMarkers(newMarkers);
}, []);