Antd Notification appearing twice?

user_10171246 0
Viewed 2133

I am using antd notification component as follows

        import { notification } from "antd";

        const Notification = ({ msg, type, clearMsg }) => {
          return (
            <div>
              {notification[type]({
                description: msg,
              })}
              {clearMsg()}
            </div>
          );
        };

        export default Notification;

And I am simply using it anywhere I need a notification to pop-up. For instance after API response failure:

          const onSubmit = async (e) => {
            try {
              const res = await login(data);
              if (res.message) {
                setError({ state: true, msg: res.message });
              }
            } catch (err) {
              console.log(err);
            }
          };

And then depending on error state, I am showing the Notification in the return body as following:

          { error.state ?
            <Notification 
               type="error" 
               msg="some msg" 
               clearMsg={() => setError({state: false, msg: ""})} :
             null
          }

But simultaneously two pop-ups appear instead of just one, can anyone guide on why I am getting this behaviour?

setstate antd reactjs
2 Answers

Assign a unique identifier by using the key property. See: https://ant.design/components/notification/#API

const Notification = ({ key, msg, type, clearMsg }) => {
  return (
    <div>
      {notification[type]({
        key,
        description: msg,
      })}
      {clearMsg()}
    </div>
  );
};
user_90279070

I resolved my problem by using notification.destroy(); before showing notification. An example below here:

const showNotification = () => {
    notification.destroy();
    notification.open({message: 'message here'});
}
user_166558600
Related