I have a component that loads a google map according to the Lat and Lng passed, but when I change this value, I need the map to be rendered on the screen
const [getLat, setGetLat] = useState(geoLocation.mapsLat);
const [getLng, setGetLng] = useState(geoLocation.mapsLng);
const loadMap = getLat && getLng;
useEffect((previousValue) => {
const { zipCode } = formValues;
if (zipCode !== previousValue) {
console.log('need reload the map');
}
},
[ ]
);
How do I render this fixed part of my code when it happens in console.log?
return (
{loadMap && (
<div className="container">
<label>Map</label>
<Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
</div>
)}
)
const [getLat, setGetLat] = useState(geoLocation.mapsLat);
const [getLng, setGetLng] = useState(geoLocation.mapsLng);
useEffect((previousValue) => {
const { zipCode } = formValues;
setGetLat(geoLocation.mapsLat);
setGetLng(geoLocation.mapsLng);
},[geoLocation.mapsLat,geoLocation.mapsLng]);
return (
{getLat && getLng && (
<div className="container">
<label>Map</label>
<Map lat={getLat} lng={getLng} handleClick={handleSubmit} />
</div>
)}
)
The above code must resolve your problem.
whenever your zipCode value changes the component will rerender and your ui would be updated.