How to Show Success and Error Messages in React with react-toastify and Axios

Learn how to effectively display success and error messages in your React application using react-toastify upon receiving different HTTP response statuses from Axios requests.
---
This video is based on the question stackoverflow.com/q/70265167/ asked by the user 'AHMAD IRSHAD' ( stackoverflow.com/u/14599009/ ) and on the answer stackoverflow.com/a/70265272/ provided by the user 'Gustavo Farias' ( stackoverflow.com/u/11559838/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: how can I pass success or error message using react-toastify when using axios method

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Show Success and Error Messages in React with react-toastify and Axios

When building a web application, providing user feedback for actions such as form submissions is crucial for improving user experience. In this guide, we’ll address a common problem among React developers: how to display success and error messages using react-toastify based on the HTTP response status from an Axios request.

Understanding the Problem

You have an application that registers users by sending their data to a backend API. Depending on the success or failure of the registration, you want to show appropriate messages. For example:

If the registration is successful (HTTP status code 201), show a success message: "Account created successfully".

If some fields are missing during the registration (status code 406), show an error message: "Some fields are empty".

If the email is already registered (status code 422), show: "Email already registered".

Setting Up Your Environment

Before we jump into the code, ensure you have react-toastify installed in your React application. You can do this by running:

[[See Video to Reveal this Text or Code Snippet]]

Importing Necessary Modules

To utilize react-toastify, you need to import its components and styles in your React file:

[[See Video to Reveal this Text or Code Snippet]]

Your Axios Request

You already have a function handling the form submission using Axios. Let’s enhance it to include toast notifications.

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Submitting the Form: When the form is submitted, it prevents the default behavior and gathers data into formData.

Sending Axios Request: A POST request is sent to the server with the form data.

Handling Success: If the status code is 201, it displays a success notification using toast.success().

Handling Errors: The catch block checks for response errors and displays relevant error messages using toast.error() based on the HTTP status code.

Rendering the Toast Container

Don’t forget to include the ToastContainer in your component’s render method:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you can effectively communicate with users about the success or failure of their actions in your React application. Using libraries like react-toastify not only makes your application more interactive but also provides a smooth user experience.

Now, you can enhance your application by adding feedback messages, greatly improving user interaction during form submissions!

For any questions or additional features you want help with, feel free to drop a comment below!