Hierarchical Menu with Hooks

Open Q&A
, ,
1

I am trying to implement a custom hierarchical menu using hooks, but I am having trouble getting the child categories to render. I have narrowed the problem down to the way I am passing in attributes through props. In the built-in HierarchicalMenu component, attributes are passed as an array of strings to the widget/component, and I have gotten this to work in my implementation. But, if I try to pass attributes to my CustomHierarchicalMenu the same way, I get an error when I try to expand a category in the menu: Error: The attributes option expects an array of strings.

I am using the template from the docs. The attributes prop is not destructured from the props object in the example from the docs. If I add attributes to the destructuring it returns undefined. If I pull attributes out of props outside of the useHierarchicalMenu destructuring, then I get an infinite loop .

// component on page with attributes passed as a prop (my implementation)
<CustomHierarchicalMenu
            attributes={[
              'categories.lvl0',
              'categories.lvl1',
              'categories.lvl2',
            ]}
          />

// custom hierarchical menu with hooks from docs:
import { useHierarchicalMenu } from 'react-instantsearch-hooks-web';
  
function CustomHierarchicalMenu(props) {
  const {
    items,
    isShowingMore,
    canToggleShowMore,
    canRefine,
    refine,
    sendEvent,
    toggleShowMore,
    createURL,
    attributes, // if I add this line here, attributes returns undefined when logged to the console
  } = useHierarchicalMenu(props);

  return <>{/* Your JSX */}</>;
}

Docs then show the following for setting attributes, but it is not clear how to then use hierarchicalMenuApi in my component.

const hierarchicalMenuApi = useHierarchicalMenu({
  attributes: [
    'categories.lvl0',
    'categories.lvl1',
    'categories.lvl2',  
    ],
});

Thanks!