TransformItems for React InstantSearch

I am using React InstantSearch and have a custom hits component where I am showing a list of profile cards, I currently only want to show users who have more than 1 follower. Does React InstantSearch have something similar to the transformItem param available for the js version? I did not see it in the docs.

I am currently transforming my items in my custom hits component, but it seems a bit off as the results do not seem to sync with Configure component as once that is declared no results show up, but when removed I see results. Is there a better way to intercept hits before displaying the data? Any guidance would be appreciated.

My current setup:


  const Hits = ({ hits }) => {
    const refinedHits =  hits.filter(hit => hit.followers >= 1)
    .map(({first_name, followers}) => <p>{first_name} / number of followers: {followers}</p>);

    return (
      <>
      <ol>
          {refinedHits}
      </ol>
      <p>Number of results: {refinedHits.length}</p>
        <Configure hitsPerPage={3} />
      </>
    )
  };
  
  const CustomHits = connectHits(Hits);

Hi @cmc,

Can you show us, even in a failing state, using a codesandbox please. Here is a React InstantSearch sandbox template to start, please update it with minimal code needed to reproduce your issue. Thanks!

Hi @ajay.david: thanks for your response, I have created a CodeSandbox with some code, you can see that I correctly filter the list but the stats widget still shows the incorrect number of results. I would like to filter my results before they appear on the page to only show users with more than one follower, but when doing so this way, other widgets (stats, pagination) still seem to read the original hits count. What is the best way to filter or hits before displaying them on the page?

Hi @cmc, have you tried the Configure widget with something like this:

<Configure hitsPerPage={3} numericFilters={[followers>1]} />

To do this, you will need to add the ‘followers’ attribute as an attributesforfaceting

More information about numericFilters can be found here.

I have created a codesandbox here to demonstrate. If you delete the Configure component you’ll see that there are actually 3 records, but one has only 1 follower.

@cindy.cullen: Thanks so much, using Configure worked!