how to ensure data isn't undefined before initial render? - reactjs

Question

I have a map component which I have been using to plot polyline data on a react leaflet map.
I want the initial center of the leaflet map to be the first position in my array of latitude and longitude data. I created a function to set values based on two different conditions these work correctly the values get set as can be seen through the logs to the console.
But when my component is initially rendered it causes an error because it says that initialPositionLat and initialPositionLong are undefined.
I tried using useEffect to set the values but I am unsure how to ensure initialPositionLat and initialPositionLong are set from the function before the component is rendered. Does anyone know where I am going wrong?
The map component:
function Mapp(props) {
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
setInitPosition(props);
setIsLoading(false);
},[]);
let initialPositionLat;
let initialPositionLong;
function setInitPosition(props) {
if(!Array.isArray(props.activityData)) {
console.log("first if positions = ", props.activityData.positions[0][1])
initialPositionLat = props.activityData.positions[0][0];
initialPositionLong = props.activityData.positions[0][1];
}
else {
console.log("2nd if positons = ", props.activityData.polylines.positions)
initialPositionLat = props.activityData.poylines.positions[0][0];
initialPositionLong = props.activityData.poylines.positions[0][1]
}
//console.log("initial position = ", [initialPositionLat, initialPositionLong]);
}
return !isLoading ? (
<MapContainer center={[initialPositionLat, initialPositionLong]} zoom={15} scrollWheelZoom={false}>
<TileLayer attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{!Array.isArray(props.activityData) && <Polyline positions={props.activityData.positions} >
</Polyline>
}
{Array.isArray(props.activityData.polylines) && props.activityData.polylines.length > 1 &&
props.activityData.polylines.map((activity, idx) => (
<Polyline key={idx} positions={activity.positions}
</Polyline>
))}
</MapContainer>
) : (
<div>
<p>Loading...</p>
</div>
)
}
export default Mapp;

Answer 1

You can do like this,
<MapContainer center={getInitPosition()} zoom={15} scrollWheelZoom={false}>
and change the function,
function getInitPosition() {
if(!Array.isArray(props.activityData)) {
console.log("first if positions = ", props.activityData.positions[0][1])
return [props.activityData.positions[0][0],props.activityData.positions[0][1]];
}
else {
console.log("2nd if positons = ", props.activityData.polylines.positions)
return [props.activityData.poylines.positions[0][0],props.activityData.poylines.positions[0][1]];
}
//console.log("initial position = ", [initialPositionLat, initialPositionLong]);
}