REname Lists in CurrentRefinements from react-instantsearch-dom

can we rename lists in the CurrentRefinements.
for example when we are refining, refine([‘AC’]), then we have AC as a list in the currentRefinements, but I want something expressive like Accessories.


AC should be Accessories
is this possible, pls suggest

You have two options:

  1. Use transformItems on the CurrentRefinements component (React) or (React Hooks):
function transformer(items) {
  return items.map(refinementItem => {
    if (refinementItem.attribute === "itemGroupID") {
      refinementItem.refinements = refinementItem.refinements.map(refinement => {
        if (refinement.label === 'AC') {
          refinement.label = 'Accessories';
        }
        return refinement;
      });
    }
    return refinementItem;
  });
}

<CurrentRefinements transformItems={transformer} />
  1. Use a custom renderer for the CurrentRefinements component: (React) or (React Hooks)

Let me know how this works for you!

sure @michael.king thanks a lot

1 Like

Hi @michael.king
can we have two functions in transformItems attribute like for example

<CurrentRefinements transformItems={deduplication, transformer} />

Please suggest

@rahul.kumar You can’t pass two methods, but you could chain a .filter() with the .map():

    const seenAttributes = [];
    return items
      .map(refinementItem => {
        ...
      })
      .filter(refinementItem => {
        if (seenAttributes.includes(refinementItem.attribute)) {
          return false;
        }
        seenAttributes.push(refinementItem.attribute);
        return true;
      })

Which exact value are you trying to deduplicate? The example I’ve shown above won’t really do anything since the attributes are combined, but it was an easy example to show. Happy to help further, let us know! Thanks!

thanks a lot @michael.king , yes sure will let you know if anything comes thanks