Tengo dos botones que usan la misma condición de carga, pero sigo haciendo clic en uno, el otro también cambia el estado a cargando. ¿Como puedo resolver esto?
const { isLoading } = useRespondConsent(); <ButtonPrimary isLoading={isLoading} onClick={() => handleRespond(true)}> Send </ButtonPrimary> <Button isLoading={isLoading} onClick={() => handleRespond(false)}> Not send </Button>Identifique sus botones de alguna manera, con una identificación o un atributo de datos.
Inicializa tu estado como un objeto.
Dos funciones. El primero en manejar la actualización de estado cuando se hace clic en un botón. El segundo para determinar si un botón isLoading . En este ejemplo (por comodidad) si el botón está "cargando", se desactiva.
const { useState } = React; function Example() { // Initialise state with an empty object const [ buttonState, setButtonState ] = useState({}); function handleButton(e) { // Grab the id from the button's dataset const { id } = e.target.dataset; // Preserve the existing state, and // update the value of the property identified // by the id setButtonState({ ...buttonState, [id]: !buttonState[id] }); } // Takes an ide and returns the value // of the property identified by the id, or false function isLoading(id) { return buttonState[id] || false; } return ( <div> <Button id="send" isLoading={isLoading('send')} handleButton={handleButton} >Send </Button> <Button id="notsend" isLoading={isLoading('notsend')} handleButton={handleButton} >Not send </Button> </div> ); }; function Button(props) { const { id, isLoading, handleButton, children } = props; // Disable the button if isLoading // is true return ( <button data-id={id} disabled={isLoading} onClick={handleButton} >{children} </button> ); } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>