Getting warning about unique keys from InfiniteHit components

Give Feedback
#1

I’m getting a console error about custom InfiniteHit components not having unique keys. Anyone else?

import { connectInfiniteHits } from 'react-instantsearch-dom';
import CustomHighlight from './CustomHighlight';

const InfiniteHits = ({ hits, hasMore, refineNext }) => (
  <div className="custom-post-hits-container">
    {hits.map((hit) => (
      <li key={hit.ID}>
      <article className="alg-search-results-item" id={hit.ID+'article'}>
        <h3 className="alg-entry-title">
          <a href={hit.slug} rel="bookmark">
            <CustomHighlight hit={hit} attribute="post_title" />
          </a>
        </h3>
        <p className="alg-entry-summary">
          {hit._yoast_wpseo_metadesc.replace(
            /Learn more(.*)today\!|¡Obtenga(.*)hoy\!/,
            ''
          )}
        </p>
      </article>
      </li>
    ))}

    <div className="show-more-container">
      <button
        className="btn btn-primary alg-show-more-btn"
        disabled={!hasMore}
        onClick={refineNext}
      >
        Show more
      </button>
    </div>

  </div>
);

const CustomPostInfiniteHits = connectInfiniteHits(InfiniteHits);

export default CustomPostInfiniteHits;
#2

Hi there,

Have you considered using hit.objectID instead of hit.ID? Each object is guaranteed to have a unique objectID field whereas ID is a user managed field which may or may not exist and could be duplicated.

Best,

#3

Hi Jonathan,

The ID is the post_id that’s coming from the import from our WordPress database. So even across the indeces, this ID should always be there and be unique.

I’m only getting the error when I run the app on its own, (npm run start). When I view the web page that includes the React app however, I don’t see the error.

Can I ignore it if everything seems to be working?

#4

Hi @brent.miller,

You could try with <li key={hit.objectId}> and see if you still get the warning - If not that would indicate that some IDs are not unique.
In any case, this is a React warning, not an Algolia one. Each hit you are mapping over should be unique in any case, so your search won’t be affected by this warning :slight_smile:

Happy coding!

#5

Hi Marie!

It was the dumbest thing. When I was indexing my data, I forgot to pass over the ID field. I fixed that and it fixed my issue. Thanks for the input though - sometimes it takes a second pair of eyes to banish the ghosts from the periphery and focus on reality. :slight_smile:

1 Like
#6

Ah, makes sense! Glad you got it to work.
Thanks for coming back to share the end of the story :slight_smile: