Accordion doesn't re-render when defaultIndex changed

[zhondori]

const currentModuleIndex = useMemo(() => {
  if (modules) {
    const index = Math.max(
      modules.findIndex((module) => module._id === moduleId),
      0
    );
    return index;
  }
  return 0;
}, [modules, moduleId]);
//....

<Accordion
  display={{ base: 'none', md: 'block' }}
  allowToggle
  defaultIndex={currentModuleIndex}
>
  {/*...*/}
</Accordion>

Here is my code. When currentModuleIndex changes, the Accordion component is not re-rendering.

I think because I'm passing memo value to defaultIndex and under the hood chakra uses it only one time for initialValue and never changes.

If I use index prop instead of defaultIndex it will work but then I will need to control the index programmatically.

Is there any solution for this?

[amandaguthrie]

defaultIndex is used to set the initial state for which accordion items are open.
index is used to set currently expanded accordion items and will re-render the component.

The Accordion onChange function provides an expandedIndex. The expandedIndex is the current accordion item index(es), which is a number if allowMultiple is off, or an array of numbers if allowMultiple is on. This can be used to store the changing index values to handle the index programmatically.

-1 means all items are closed, and other numeric values are the index(es) of open accordion item(s).

Hope this helps!

[zhondori]

Sorry my question was trash tbh