react-leaflet typeError when trying to render coordinates - reactjs

Question

I'm working on a React project with Redux / thunk and I have this map from react-leaflet :
import { MapContainer, Marker, Popup, TileLayer, Circle } from "react-leaflet";
import { useSelector } from "react-redux";
function Maps() {
const user = useSelector((state: any) => state.userReducer.getUserById);
const coords: [number, number] = [user ? user.latitude : 0, user ? user.longitude : 0];
const fillBlueOptions = { fillColor: "blue" };
const zone = 10000;
return (
<MapContainer className="maps" center={coords} zoom={10} scrollWheelZoom={false}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Circle center={coords} pathOptions={fillBlueOptions} radius={zone} />
<Marker position={coords}>
<Popup>Adress</Popup>
</Marker>
</MapContainer>
);
}
export default Maps;
I get the coordinates of the user with an axios call :
export const getUserById = (id_user: number | string) => {
return (dispatch: any) => {
dispatch(isLoading(true));
return axios
.get(`users/getUserById/${id_user}`)
.then((res) => {
dispatch(isLoading(false));
dispatch({ type: GET_USER_BY_ID, payload: res.data });
})
.catch((err) => {
console.log(err);
dispatch(isLoading(false));
});
};
};
The dispatch is launched here when i click on this table :
<tbody>
{users.slice(0, 20).map((item: any, index: number) => (
<tr
className="redirectUser"
onClick={() => {
history.push("/Utilisateurs");
dispatch(getUserById(item.id));
}}
key={index}
>
<td>{item.id}</td>
<td>
{item.nom} {item.prenom}
<br></br>Tcheker
</td>
<td>{item.email}</td>
<td>18/10/1998</td>
<td>{item.tel}</td>
</tr>
))}
</tbody>
When I try to display the map component on a user who has the coords, i have this error (or the map just show blank screen) :
Uncaught TypeError: Cannot read property 'latitude' of undefined
Then if i go back in the history and re-click on the table, the map finally displays with no error.
When the user doesn't have any coords I get this error :
Uncaught TypeError: Cannot read property 'lng' of null
I understand that the component seems to render before getting the datas, but even with a ternary operator that gives a hard-coded value in case of an undefined answer, the component doesn't render neither.

Answer 1

I think this is an async issue. The very nature of your coords variable looks to be non-blocking and hence the render is performed before the ternary can be performed.
Since coords is just a variable (and not state driven) it never re-renders.
If you could set the state at the time coords is calculated and then refer you're leaflet map to the variables in state, I think you could get it working.
Good luck,
Phil