Im trying to disable a button only if the api request is successful, otherwise if it is not successful, the button should be enabled still. I have the following state field.
this.state = {
buttonDisabled: false,
};
Here is my button:
<Button type="button" disabled={this.state.buttonDisabled} onClick={this.send} variant="outlined" color="primary">
Send
</Button>
However, for some reason, the button is disabled for 10 seconds in both cases. Passed and failed response from the api. Is there something off here?
Your sendSms() function returns an axios Response object. Therefore, the data object will always be populated and an error is never thrown.
sendSmsCode = async () => {
const { actions } = this.props;
sendSms(phone)
.then((data) => {
// the data object is always populated with the response object and never throws an error
// therefore, this function will always set the state to disabled
this.setState({
requestSmsDisabled: true
}, () => {
actions.showSmsNotification(data);
});
})
// this is never invoked
.catch(err => actions.showSmsNotification(err));
setTimeout(() => {
this.setState({
requestSmsDisabled: false
});
}, 10000);
};
You need to check for an error in the response from your axios call, either in the sendSms() function or the sendSmsCode() function, something like:
async function sendSms(phone) {
const options = {
method: 'POST',
headers: {
'content-type': 'application/json'
},
data: {
phone
},
url: `${API_ROOT}/sms`
};
// there are a number of ways to do this, it all depends on how you want to do it
const response = await axios(options);
if (response.status === 200) {
return response.data;
} else {
// do something to indicate an error, e.g. throw an error to get caught in your .catch() statement or return an error message
}
}