How could I stop the notification-count to re-render?-CodePudding

I have a notification bell button with a dropdown. On top of it I have a small notification count.

I did the following logic to build the dropdown in React:

  const [isOpen, setIsOpen] = useState(false);
  const togglingMenu = () => setIsOpen(!isOpen);

  const [isRed, setIsRed] = useState(true);
  const toggleAlert = () => setIsRed(!isRed);


    <NotificationsIcon onClick={() => { togglingMenu(); toggleAlert();}}></NotificationsIcon> 
    {!isOpen && (
    <span><small className="notification-count">9 </small></span> )}

When I'm clicking on the bell button, the '9 ' count disappears. How can I stop re-render it when I'm closing the notification dropdown?

CodePudding user response：

You could use another useState like this:

  const [isOpen, setIsOpen] = useState(false);
  const [showNotificationCount, setShowNotificationCount] = useState(true);
  const togglingMenu = () => { 
    if(showNotificationCount) 
      setShowNotificationCount(false)

    setIsOpen(!isOpen);
  }

  const [isRed, setIsRed] = useState(true);
  const toggleAlert = () => setIsRed(!isRed);

  <NotificationsIcon onClick={() => { togglingMenu(); toggleAlert();}}></NotificationsIcon> 
  {showNotificationCount && (
    <span><small className="notification-count">9 </small></span> )}