reactjs - unmount navbar-dropdown on close

Question

I am using a bootstrap-react nav as seen in the following:

      <Navbar bg="dark" variant="dark" expand="lg" className="navbar">
        <Container>
          <Navbar.Brand className="edowl-title small-scale"> <Link to={"/"}>title</Link></Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">

              <NavDropdown className="Main-element tiny-scale" title="Updates" id="basic-nav-dropdown">
                <Updates/>
              </NavDropdown>

              <NavDropdown className="Main-element tiny-scale" title="Notes" id="basic-nav-dropdown">
                <QuickNotes/>
              </NavDropdown>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>

When the second dropdown updates is loaded it will run a request to get all "updates"

    const [updates, setUpdates] = useState([])
    const [{ tokens }, dispatch] = useStateValue();
    const[errorMsg, setErrorMsg] = useState(false);

    useEffect(() => {
        const loadUpdates = async () => {
            try {
                const post_request = await Axios({
                    method: "get",
                    url: `${window.ipAddress.ip}/Update/Recent`,
                    headers: { "Content-Type": "application/json", "Authorization": `Bearer ${tokens.access_token}` }
                })

                console.log(post_request)
                if (post_request.status === 200) {
                    setUpdates(post_request.data)
                }
                else { setErrorMsg("Couldnt complete") }
            }
            catch (err) {
                if (err) {
                    setErrorMsg(err)
                }
            }
        }
        loadUpdates();
    }, [])

    useEffect(() => {
        if (updates.length <= 0) {
            var todayDate = new Date();
            var todayDateText = todayDate.getDate() + "/" + (todayDate.getMonth() + 1) + "/" + todayDate.getFullYear()

            console.log(todayDateText);
            setUpdates([{ content: "There is currently no new updates", generatedDate: todayDateText, id: 1 }])
        }
    },[updates])

    return (
        <div className="update-container">
            <ul className="update-list">
                {updates.map((update, index) => (
                    <li key={index} className="update-element"><p>{update?.generatedDate} - {update?.content}</p></li>
                ))}

            </ul>
        </div>
    );

Obviously because it only runs the request on mount, that means when you close the menu and re-open it, it wont re-execute the request.

My question is how can I make this component unmount on minimizing it?

^ so that when it is re-opened, it will remount and the request will once again execute.

Answer 1

I think an easy way to go about doing what you want is to manage a counter or a Boolean toggle in the NavBar component, Then you can use the onToggle prop in the NavBar.Collapse to update that value. Have that value passed into your Updates component then use that value in the dependency array inside of the useEffect you want to be triggered each time the navBar Toggles: https://react-bootstrap.github.io/components/navbar/#responsive-behaviors