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.

score 3 · Accepted Answer · answered Feb 10 '21 at 02:53

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

Dropdown menu with item IDs in FluentUI/react-northstar

1 Answers1