Toast.warn render twice on refresh of page

Question

I'm facing an issue where the toast message is rendered twice on page load.

The props are being passed with Link

<Link to={{ pathname: `/administration/person/add`, merchantData: { merchant } }}>Create Person</Link>

and another page by grabbing the data with useLocation

cons {merchantData} = useLocation();

What I want is on page load and when the data is lost, it should give a warning message with the code below.

useEffect(() => {
        if (merchantData === undefined) {
            toast.warn('Please Select Merchant');
        }
    }, [merchantData]);

Answer 1

You can add an ID to your toast to prevent a duplicate toast from appearing.

toast.warn('Please Select Merchant', {
  toastId: "your-id"
});

You can learn more in their documentation: https://fkhadra.github.io/react-toastify/prevent-duplicate