<Menu> and <MenuSelect> transformItems behavior

Hello,

I’m very new to react-instant-search and I’m trying to display a list of value inside a <Menu>.
I’m using the transformItems method to modify on the fly the label attribute of each item:

<Menu 
  attributeName="language"
  defaultRefinement={'en'}
  transformItems={
    (items) => items.map(
      (item) => {
        item.label = `${getLanguageName(item.value) || item.label}`
        return item
      }
    )
   }
 />

It’s working great, excepting for the currently selected item, which got the default label, exemple below:

00

The selected item is displaying “en” (the unmodified label).

Am I using the transformItems method for an uncovered usage ?
Or Is there another way to modify the way the items are displayed on the fly, or are the connectors the only way ?

Thank you :slight_smile:

Hi there,

What’s the value of getLanguageName(item.value) for the first item? Is it possible that it returns undefined?

Cheers,

Hi, thank you for answering.

I fixed my issue, thanks to your answer. I changed ${getLanguageName(item.value) || item.label} to ${getLanguageName(item.label) || item.label}.

The value of the selected item was empty (to let the user clear the filter) so the getLanguageName method was indeed returning undefined as you said. Using the label instead of value fixed the issue.

Sorry for the bother, and thanks again for the answer :slight_smile: