Compare hit with next hit

I’m looking to implement a separator between hits that’s conditional based on a comparison with the next/previous hit.

An example of what I’m trying to accomplish:

I’m developing in React Native where I’m using connectInfiniteHits from react-instantsearch-native, but I’ve hit a wall in regards to accessing the next hit from a given hit.

Any pointers on how to accomplish this?

All the best,
Nils

Hi Nils,

I see you’re already making use of the connectInfiniteHits function to create your widget. From here, I assume you’re already looping over all the hits using the hits prop provided. If this is the case, you can leverage the hits.map you already have to get the index of the current hit. If you add to this, you can get access to the next hit. This will look something like this:

const InfiniteHits = ({ hits }) => (
  <ol>
    {hits.map((hit, index) => (
      <li class="{hits[index + 1].date !== hit.date ? 'seperated' : ''}" key="{hit.objectID}">{hit.name}</li>
    ))}
  </ol>
);

I hope this helps pointing you in the right direction, please let me know if you have any questions :slightly_smiling_face:

Cheers,
Devin.