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


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


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’


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.

Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am currently focused on continuous improvement and agile project management.

Post a Comment

Previous Post Next Post