Dropdown menu with item IDs in FluentUI/react-northstar

Question

I am currently trying to make a dropdown with help of the FluentUI/react-northstar Dropdown component. Unfortunately the items prop for this component only has a string[] for the rendered names in the dropdown, but I need a key as well.

I tried to achieve this by using renderItem to add a custom renderer:

<Dropdown
    renderItem = (Component: React.ElementType, props: any): React.ReactNode => {
      ...
      return <Component key={props.key} content={props.name} />;
    };
    items={dropDownMapper(displayTree[0], 0)}
    ...
/>

The dropDownMapper function returns an array of objects like this: [{key: string, name: string}, ...]

With this I am able to render the correct items inside my dropdown menu, but I am not able to interact with them. I've tried adding an onClick to <Component/>, but since I use the framework, I am not sure what the <Dropdown/> expects me to do when the item was clicked and the documentation isn't really helpful.

Answer 1

I was able to make it work by adding the properties "header" and "content" to the items:

[{key: string, name: string, header: string, content: string}, ...]

The Dropdown component will:

• use header and content to render the choices
• use header to render the selected item
• pass the selected object to the on change event handler

Example on CodeSandbox