block a button until the user accepts the geolocation react.js

Question

Let's see how I explain this, I am trying that when a user presses a button it asks if they want to save the location or not, when they press the allow button it should send them to another page, but if on the contrary we press block it will show a message until the user decides to accept the geolocation. (Everything is done with the same button, that is, pressing it if there is no request for permission, and if it has already been granted or denied, it shows the content of allowing or blocking)

   const getButtonId = (e) => {
        e.preventDefault();
    
        if(!('geolocation' in navigator)) {
            console.log('Opción no disponible');
            return;
        }
        navigator.geolocation.getCurrentPosition(pos => {
        
        }, err => {
           
            console.log('Error obteniendo localización: ' + err.message);
        });
      }



 <button className="btn primary mr-0 lg:mr-8 w-[200px] mb-4" onClick={getButtonId}>Continuar</button>

Answer 1

I hope I understand you correctly, you want a button to be active or disabled based on something. you can disable it by <button disabled={true}> and instead of hardcoding the "true" assign it to a useState() and change it with setState()

const demo = () => {
    const [btnState, setBtnState] = useState(false) // this is the starting value of the btn false == active
    
    // u can call the setBtnState to change the btn state like so:

    setBtnState(true) // here u give it the new state (true/false)

    // every time u set a new state using this function the "disabled" value will update 
    
    return(
        <button disabled={btnState}></button>
    )

}