[Solved] react-toastify - Add or Show notifications, success, error message alerts in react JS.

Problem

I’m using react-toastify but the message is not rendering for some reason. Here is the below code which I am using.

Solution

To solve the issue we need to move the “ToastContainer” component after </Switch> the component close tag, and the correct code is as shown below…

React-toastify – How to show success and error message results in react applications

Showing notifications in reactJS applications using React-Toastify, allows users to add notifications to react applications with ease. In very simple steps users can configure this feature into the application.

react-toastify notification in react application

Step 1 : Add react-toastify package

Add react-toastify package to your project by running this command in the project’s root folder

npm install react-toastify@4.1.0

react-toastify 4.1.0

Step 2: Import the “ToastContainer” package to the main component

Import the required react-tostify CSS and also import ToastContainer into the project’s root component (App.js)

import {ToastContainer} from 'react-toastify'import 'react-toastify/dist/ReactToastify.css'

App.js ToastContainer

Step 3: Import the “toast.success”

As of now, the configuration is done, so now we are ready to use toast notifications in your custom components, toast.success("Success") the method can be used to show the success notification to the user.

import { toast } from ‘react-toastify’

Conclusion

React -toastify is the easy choice to add a notification feature to our react applications to show appropriate messages to the end-user when the action is completed.