Props received after api hit in Redux loading two times results in React Hooks

Question

I am getting the state from reducer but it is loading two times e.g. when I am getting the state Toaster is showing up two times. So, the problem is I am getting the login api Login Failed state twice due to this Toaster is loading two times. I try to debug the problem but can't Below is the code (HTML is deleted)

import React, {useState,useEffect} from 'react';
import { loginAction } from './action';
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
import {SmallLogo} from "../../assets/index";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function Login(props){
    const [inputs, setInputs] = useState({
        email: '',
        password: ''
    });

    const dispatch = useDispatch();

    const handleChange = (e) => {
        const {name, value} = e.target;
        setInputs(inputs => ({...inputs, [name]:value }));
    }

    const {email, password} = inputs;

    const submitLoginForm = (e) => {
        e.preventDefault();
        let loginData = {
            email,
            password
        }
        //Login action is called
        dispatch(loginAction(loginData));
    }
    //getting state from reducer
    const userState = useSelector(state => state,shallowEqual);
   //notification
    const notify = (message, id) => {
        console.log(message,id,"How many times it is called");
        toast.dismiss();
        toast.warning(message,{
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            toastId:id
        })
    }

    return (
        
        <div className="container h-100">
            
            <ToastContainer
                position="top-right"
                autoClose={5000}
                hideProgressBar={false}
                newestOnTop={false}
                closeOnClick
                rtl={false}
                pauseOnFocusLoss
                draggable
                pauseOnHover
            />
            <ToastContainer />
            {userState.userReducer.error!=="" && notify(userState.userReducer.error,123)}
            {submitLoginForm}
        </div>
    );
}
export default Login;

Answer 1

The problem is that you are using 2 <ToastContainer />. Remove the second one and only 1 toast should be displayed.

I guess it is a typo?

You wanted to write the following?

        <ToastContainer
            position="top-right"
            autoClose={5000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
        >
        </ToastContainer>