score:1

Accepted answer

this is happening because you are using wrong logic and you don't specify which submenu should be shown. first, delete the current state and dont use it. then, you should define another state like:

const [selectedmenu, setselectedmenu] = usestate("");

then, define this function:

const handleclick = (title) => {
    setselectedmenu(title); 
}

after that, once you click on box, you should invoke function like this:

 onclick={() => handleclick(item.title)}

consequently, you should write your logic like this:

      <text>{items.title}</text>
      {item.title === selectedmenu
        ? items.submenu?.map((item) => {
            return <text>{item.title}</text>;
          })
        : ""}

score:1

i think the problem is occurring because you have only 1 state variable set for every sidebar option. every sidebar option should have its own variable keeping track of whether its submenu should open or not.

in your code, when the isopen state variable is set to true then when the function maps over all the options the variable's value will always be true.

try setting a variable for each of the menu options which contains whether the submenu should open or not.

score:3

you have to use an array state variable. your single state variable isopen is dictating all the submenus here:

           {isopen
                ? items.submenu?.map((item) => {
                    return <text>{item.title}</text>;
                  })
                : ""}

you need to have an array state variable here, so each sidebar item has a corresponding boolean to dictate opening/closing of value.

const [isopen, setisopen] = usestate(array(sidebaritems.length).fill(false));

now you have to ensure that you are setting it correctly and manipulating the right array element.

onclick={() => {
                let newisopen = [...isopen];
                newisopen[index] = !isopen[index];
                setisopen(newisopen);
              }}

i hope this helps you reach your solution


Related Query

More Query from same tag