Trying to remove menu visibility when item is clicked-CodePudding

I'm trying to make a responsive menu in a React app, which appears when I click on menu title and disappears when I click on an item, but it seems to not respond really well, Menu disappears sometimes, sometimes it doesn't, it seems like a bug (E.g it always bug the first time I click on an item after refreshing the page)

Edit: the setAside function replaces the Title value with the clicked value, and the title value is added to the reordered list of items, when I click on item that was in the Title last time, classList.remove doesn't work...

this is my code:

const MyComponent = (props) => {

    const [title, setTitle] = useState(props.name);
    const [lastTitle, setlastTitle] = useState(props.number);
    const [listItem, setListItem] = useState(props.list);

    const list = (listofItems) => {
        const item = [];
        listofItems.forEach((value, index) => {
            item.push(<li onClick={() => setParam(index, value)} className="items">Item {value}</li>)
        });
        return item;
    } 
    // This function changes the value of Title to the clicked item value and reorders the values
    const setAside = (value) => {
        setTitle('Item '   value);
        let newListItem = listItem.filter((item) => item !== value);
        newListItem.push(lastTitle);
        newListItem.sort(function(a, b){ return a - b });
        setlastTitle(value);
        setListItem(newListItem);

    }
    // receives a new page from another component
    const setPage = (index, value) => {
        for (let x=0; x<3; x  ) {
            if (listItem[index] == value) {
                props.Page("item"   value);
            }
        }
    }
    // This is the function called when I click an item
    const setParam = (index, value) => {
        setAside(value);
        setPage(index, value);
    }
    // Make my menu visible
    const mouseClickItem = () => {
        var menuItem = document.querySelector(".item-list");
        menuItem.classList.toggle("item-responsive");
    }

    var menuItem = document.querySelector(".item-list");
    var items = document.querySelectorAll(".items"); // <---- This var doesn't seems to get the value correctly, but I don't know why

    // trying to remove menu visibility when I click on an item
    items.forEach(n => n.addEventListener("click", () => {
        menuItem.classList.remove("item-responsive"); // <---- not removing items with every click but in some
    }))

    return (
        <aside className="item-choice">
            <div onClick={mouseClickItem}> {title} </div>
            <ul className="item-list" type="none">
                {list(listItem)}
            </ul>
        </aside>
    )

}

Does anyone have any other ideas on how I could remove the menu on click?

CodePudding user response：

try this

    const setParam = (index, value) => {
        setAside(value);
        setPage(index, value);
        const tempData = [...listItem]
        setListItem(tempData.filter(item=>item!==value));
    }

CodePudding user response：

I found a solution, I just define menuItem and removed the class inside setAside like this:

const setAside = (value) => {
       var menuItem = document.querySelector(".item-list");
...
       menuItem.classList.remove("item-responsive");
}

so there is a problem removing the class using forEach or addEventListener, although I don't know what exactly it is.