Reddit Client Project - Can't get menu toggle to work?

I’m running into an issue trying to get a feature of this project to work and have spent two days trying to troubleshoot it and have now been able to figure it out. So, if anyone can offer any help, that’d be appreciated!

I want to have the menu toggle on and “cover” the rest of the screen. When on the homepage, clicking on the menu icon does nothing. If I have the menu display, clicking on the close icon (which should reveal the homepage) causes an error that “toggle is not defined.”

Here is the repo for this project:

Thanks in advance!

Hi @mega5041715279 ,

I cloned your repo and had a look. I believe the issue comes with utilizing a variable for menuOn. Currently you have:


let menuOn = false;

    const menuToggle = () => {
        menuOn = !menuOn;

        let toggle = document.getElementById('menuIcon');
        toggle.innerHTML = menuOn;
    }
    
    if (menuOn) {
        // show menu if menuOn is true
        return (
            <div id="slider">
                <p id="menuHead">subreddits</p>
                <div className="menuList">
                    <p>r/subreddit1</p>
                    <p>r/subreddit2</p>
                    <p>r/subreddit3</p>
                </div>
            <div className="buttonRow">
                <DarkMode />
                <button className="close"><img src={x} alt="close menu" onClick={menuToggle} /></button>
            </div>
            </div>
        ) 
    } else {
        // show hamburger icon if menuOn is false
        return (
            <img src={menu} alt="menu" id="menuIcon" onClick={menuToggle} />
        )
    }

Instead of using a variable for menuOn, you should utilize React’s state management so React can respond to the changes and re-render the elements. React doesn’t recognize changes to variables that aren’t part of the state or props, and as such, a re-render is never triggered. I have refactored your code to utilize useState and menuOn is now controlled by React’s state management. Doing it this way, ensures that React is aware of the state change of menuOn and will render the changes as expected. This is a perfect candidate for useState, even though you are utilizing Redux, as this state doesn’t need to be used anywhere except internally within this component.

import { useSelector, useDispatch } from "react-redux";
import React, { useState, useEffect } from "react";

import { DarkMode } from "../darkMode/darkMode";

const Menu = () => {
    const [menuOn, setMenuOn] = useState(false);

    const menuToggle = () => {
        setMenuOn(!menuOn);
    };

This should allow your menu to open and close. I did remove the section in menuToggle function that gets the element by id and changes its innerHTML as that is not needed to display the menu. This also was the cause of the toggle undefined error you were getting because there no longer an element with the id of “menuIcon” once the other jsx is rendered causing an error with getElementByID() in menuToggle(). Let me know if you need additional help!

-Josh

That makes sense, thank you so much!

1 Like