3

So I have successfully implemented the React InstantSearch library in my app, and am trying to apply a filter to the refinement list (to ensure the filters that show up are relevant to the active user, and hide the ones that aren't). I have tried the below:

<RefinementList attributeName="organization" transformItems={items => items.filter(e => refineList.indexOf(e)>=0)} />

where refineList is a simple array of strings (i.e. ["A", "B", "C"])

However the RefinementList keeps showing all of the filter options, without having the "transformItems" function applied to it. Would it be that I had misunderstood how the "transformItems" works?

Documentation was quite sparse on this topic, so I'm sure it'd be helpful for many other users of the library.

bobylito
  • 3,172
  • 22
  • 27
Jbbae
  • 824
  • 9
  • 19

1 Answers1

3

The transformItems function has one parameter: items. It expects in return to have it back.

items is an array of objects with the following shape: 

{
  label: string,
  value: array<string>,
  count: number,
  isRefined: bool,
}

To remove a refinement based on an array of strings you can do this: 

const refineList = ['A', 'B'];
<RefinementList
    attributeName="organization"
    transformItems={items => items.filter(e => 
        refineList.indexOf(e.label) >= 0)}
/>
Marie
  • 366
  • 2
  • 6
  • 3
    Thanks a ton! It worked perfectly :) Should've known it was me misinterpreting the format of the "items" array. – Jbbae May 19 '17 at 08:40