[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.

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './home/HomePage';
import AboutPage from './about/AboutPage';
import Header from './common/Header';
import PageNotFound from './PageNotFound';
import CoursesPage from './courses/CoursesPage';
import ManageCoursePage from './courses/ManageCoursePage';
import {ToastContainer} from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
function App() {
  return (
    <div className='container-fluid'>
      <Header />
      <Switch>
        <Route exact path='/' component={HomePage} />
        <Route path='/about' component={AboutPage} />
        <Route path='/courses' component={CoursesPage} />
        <Route path='/course/:slug' component={ManageCoursePage} />
        <Route path='/course/' component={ManageCoursePage} />
        <Route component={PageNotFound} />
       <ToastContainer autoClose={5000}  />
      </Switch>
    </div>
  );
}
export default App;

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…

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './home/HomePage';
import AboutPage from './about/AboutPage';
import Header from './common/Header';
import PageNotFound from './PageNotFound';
import CoursesPage from './courses/CoursesPage';
import ManageCoursePage from './courses/ManageCoursePage';
import {ToastContainer} from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
function App() {
  return (
    <div className='container-fluid'>
      <Header />
      <Switch>
        <Route exact path='/' component={HomePage} />
        <Route path='/about' component={AboutPage} />
        <Route path='/courses' component={CoursesPage} />
        <Route path='/course/:slug' component={ManageCoursePage} />
        <Route path='/course/' component={ManageCoursePage} />
        <Route component={PageNotFound} />
      </Switch>
      <ToastContainer autoClose={5000}  />
    </div>
  );
}
export default App;

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
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
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'
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.

Default image
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.

One comment

Leave a Reply

%d bloggers like this: