Error handling for an api request in React

Question

Im trying to handle errors with api calls. The goal is to show a button only when a successful response from the backend. Otherwise do not show the button. However, even when I get an error, the button will show. Here is my code:

handleSubmit = (e) => {
     const {
       firstName, lastName, country, region, address, city, actions
     } = this.props;

     e.preventDefault();

     verify(firstName, lastName, address, city, region, country)
       .then((data) => {
         actions.showSuccessNotification(data);
       }, () => {
         this.setState({
           ...this.state,
           triggerShowButton: true
         });
       });
   }

Here is where I am rendering the button:

{ (triggerShowButton ) && <Button className={classes.button} onClick= disabled={kycLevelTwoVerified} variant="contained" color="primary">Proceed</Button> }

The function

verify

is a function coming straight from another file. And I imported it. Here it is:

async function verifyLevelOne(firstName, lastName, addressLine1, city, region, country) {
  const options = {
    method: 'POST',
    headers: {
      'content-type': 'application/json'
    },
    data: {
      firstName,
      lastName,
      addressLine1,
      city,
      region,
      country
    },
    url: `${BASE}/level1`
  };
  return axios(options);
}

The above code may not be relevant but I just show it here in case. Is there any way to make it so that the button is visible only on successful response?

Answer 1

it's always going to be true because you're telling it

, () => {
         this.setState({
           ...this.state,
           triggerShowButton: true
         });

you should probably put an if statment to check the status of the server or use .catch() incase of an error

like so

verify(firstName, lastName, address, city, region, country)
       .then((data) => {
         actions.showSuccessNotification(data);
       },() => {
         this.setState({
           ...this.state,
           triggerShowButton: true
         }).catch((error) => {
           //handle error
           console.log(error)
         })

or alternate solution

verify(firstName, lastName, address, city, region, country)
       .then((data) => {
         actions.showSuccessNotification(data);
       },() => {
         if(dataIsVerified){ // dataIsVerified = you need to check if the data is ok it's up to you i just made it up
         this.setState({
           ...this.state,
           triggerShowButton: true
         })
    } else {throw "error"}