Q:

Algolia - How to customize the tags display name in the menuSelect dropdown list

I found this menuSelect widget in Algolia instantSearch and I implemented successfully. But currently the filter names it displayed are the tags directly from the indices config. Is there a way to replace those name with my own filters? e.g. instead of react_pwa, display React storefront Here is the html output.
<MenuSelect class="tags" attribute="tags" transformItems={items =>
            items.map(item => ({
            ...item,
          }))}/>

Does anyone know if I can play around with transformItemsprops to solve this problem? Thanks! 

A:

Build a custom menuSelect widget can do it.
const MenuSelect = ({ items, currentRefinement, refine }) => (
  <select
    value={currentRefinement || ''}
    onChange={event => refine(event.currentTarget.value)}
  >
    <option value="">See all options</option>
    {items.map(item => (
      <option
        key={item.label}
        value={item.isRefined ? currentRefinement : item.value}
      >
        {item.label==="react_pwa" && 'React PWA Storefront'}
        {item.label==="cloudops-aws" && 'CloudOps for AWS'}
        {item.label==="commerce-manager" && 'Commerce Manager'}
        {item.label==="cloudops-azure" && 'CloudOps for Azure'}
        {item.label==="chatbot" && 'Reference Chatbot'}
        {item.label==="alexa-skill" && 'Alexa Skill'}
        {item.label==="account-management" && 'Account Management'}
      </option>
    ))}
  </select>
);

const CustomMenuSelect = connectMenu(MenuSelect);

then in the search class add <CustomMenuSelect attribute="tags" />

