chackra ui accordion open when page load

Zachary Lordford 0
Viewed 23

I try to create side menu and the accordion to open based on page URL, I developing using Nextjs. for now I got the index from 0 to 1 but accordion is not opening, each time user click on the menu will redirected them to another page, that is why I want it to read from URL.

export default function SideMenu() {
      const [accIndex, setaccIndex] = useState(0) // initially 0
      const router = useRouter();
      useEffect(() => {
        //remove /
        let url = router.pathname;
        let newUrl = url.slice(1, url.length); //remove / at the beginning
        let second = newUrl.search("/"); // search for any / in trail
        let cutUrl = second > -1 ? newUrl.slice(0, second) : newUrl;
        for (const x in Menu) {
          if (cutUrl === Menu[x].item.toLowerCase()) {
            setaccIndex(Menu[x].index); // set to 1
          }
        }
      }, []);
      
      function selectedMenu(path) {
        router.push(path);
      }
    return (
    <>
      <Accordion allowMultiple defaultIndex={[accIndex]}>
        {/* dashboard */}
        <AccordionItem>
          <AccordionButton
            className="my-box"
            onClick={() => selectedMenu("/dashboard")}
          >Dashboard
          </AccordionButton>
        </AccordionItem>
        {/* dashboard  end*/}

        {/* about */}
        <AccordionItem>
          <AccordionButton>
            about
            <AccordionIcon />
          </AccordionButton>
          <AccordionPanel>
            {/* company 1 */}
            <AccordionItem>
              <AccordionButton onClick={() => selectedMenu("/com/company1")}>
                company 1
              </AccordionButton>
            </AccordionItem>
            {/* company 1 end*/}
          </AccordionPanel>
        </AccordionItem>
     </Accordion>
     </>
chakra-ui accordion next.js reactjs javascript
1 Answers

Try to use index instead of default index. It doesn't make sense to have allowMultiple here, as that would mean you would have more than one accordion item open but only one will be reflected in the url.

You can use useMemo instead of the useEffect:

      const router = useRouter();
      const index = useMemo(() => {
        //remove /
        let url = router.pathname;
        let newUrl = url.slice(1, url.length); //remove / at the beginning
        let second = newUrl.search("/"); // search for any / in trail
        let cutUrl = second > -1 ? newUrl.slice(0, second) : newUrl;
        for (const x in Menu) {
          if (cutUrl === Menu[x].item.toLowerCase()) {
            return Menu[x].index; // set to 1
          }
        }
        return 0; //default return, could be something else
      }, []);
   
      ....

      
    return (
    <>
      <Accordion index={index}>
Asen Mitrev0
Related