CODEWITHSUNDEEP
reactjscomponentslocal-storage
Sagar Chavan
Sagar Chavan

Reputation: 259

Display a specific component if a value is Set in localstorage in reactjs

I have a button on screen named detect location, which when presses system pop up shows up which asks to allow or block for location access. when user presses detect location I am calling js navigator API to get geocodes and setting the KEY coords as localstorage like below.

const LocationGetter = () => {
    const [coords, setCoords] = useState({ lat: '', lng: '' })

    localStorage.setItem('coords', [coords.lat, coords.lng])

    useEffect(() => {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getPosition);
        }
        function getPosition(position) {
            setCoords({ lat: position.coords.latitude, lng: position.coords.longitude })
        }
    }, [])

    return (
        <div>
        </div>
    )
}

Soo as soon as user presses detect location, key is getting set in localstorage with ' , ' as a value.

and if user allows for the location the lat and lon values are filled.

As soon as Lat and Long are set i want to mount specific component, but in my case i am having to refresh the bowser first and then its showing up.

How do I do it immedietly without refreshing.

Upvotes: 1

Views: 25

Answers (1)

Nadeem Haider
Nadeem Haider

Reputation: 170

If you want to do it without refreshing then you need to store the location in the state of your component and based on this you can render any component inside this.

Upvotes: 1

Related Questions