Ad

Show In React-alert Fetch

- 1 answer

I want to show a successful or failed alert after the update with fetch. I can show a message with the button, but no alert is shown in the fetch operation.

How to display alert in Fetch

show in react-alert fetch

I'm using the react-alert component. https://www.npmjs.com/package/react-alert


      async handleSubmitUpdate() {

        await fetch(`${this.domain}/api/debt/update/`, {
          method: "PUT",
          headers: {
            Authorization: `Bearer ${localStorage.getItem("token")}`,
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            user: this.props..id, 
          })
        })
          .then(response => {
            return response.json();
          })
          .then(json => {
            this.componentDidMount();

                return (<AlertMessageBox type={"success"} data={"Update succesfully"} />)
          })
          .catch(err => console.log(err));
      }

AlertMessageBox.js


    import React from 'react';
    import { useAlert } from 'react-alert';


    const AlertMessageBox = ({ type, data }) => {
        const alert = useAlert();

        console.log(data);

        const showAlert = () =>  {
            switch (type) {
                case 'error':
                    alert.error(<div style={{color: 'red'}}> data </div>);
                    return;
                case 'show':
                    alert.show(<div style={{color: 'white'}}> data </div>);
                    return;
                case 'info':
                    alert.success(<div style={{color: 'green'}}> data </div>);
                    return;
                default:
                    return;
            }
        };
        return <div> { showAlert() }  Deneme</div>;
    };

    export default AlertMessageBox;

Ad

Answer

You should have a state variable for this.

state = {
   showSuccessAlert: false,
   showFailAlert: false
}

Then you can set state variable on success / failure,

await fetch(`${this.domain}/api/debt/update/`, {
  method: "PUT",
  headers: {
      Authorization: `Bearer ${localStorage.getItem("token")}`,
      "Content-Type": "application/json"
  },
  body: JSON.stringify({
      user: this.props..id,
  })
})
.then(response => {
  return response.json();
})
.then(json => {
  //this.componentDidMount();    //I don't think you can call this

  //Change the state here which will show your Alert
  this.setState({
    showSuccessAlert: true
  })
})
.catch(err => {
  console.log(err);

  //Change the state here which will show your Alert
  this.setState({
    showFailAlert: true
  })
);

In your render method you should have your alert with condition,

render(){
   return(
     <div>
        { this.state.showSuccessAlert && <AlertMessageBox type={"success"} data={"Update succesfully"} /> }

        { this.state.showFailAlert && <AlertMessageBox type={"error"} data={"Data update failed"} /> }

        ....
     </div>
   )
}
Ad
source: stackoverflow.com
Ad