Each child in a list should have a unique "key" prop.

[CaroFG]

Description Description of what the bug is about. Using the provided example we get a react warning:

Each child in a list should have a unique "key" prop.

Check the render method of `Hits`. See https://reactjs.org/link/warning-keys for more information.

Expected behavior What you expected to happen. The example should provide a unique key to each hit, so that the warning is not triggered.

Current behavior What happened. The code sandbox hit component has a key property, but it does not remove the warning:

const Hit = ({ hit }) => (
  <div key={hit.id}>
    <div className="hit-name">
      <Highlight attribute="name" hit={hit} />
    </div>
    <img src={hit.image} align="left" alt={hit.name} />
    <div className="hit-description">
      <Snippet attribute="description" hit={hit} />
    </div>
    <div className="hit-info">price: {hit.price}</div>
    <div className="hit-info">release date: {hit.releaseDate}</div>
  </div>
);

Screenshots or Logs If applicable, add screenshots or logs to help explain your problem.

Environment (please complete the following information):

• OS: [e.g. Debian GNU/Linux]
• Browser: [e.g. Chrome version 90.0]
• Meilisearch version: [e.g. v.0.20.0]
• instant-meilisearch version: [e.g. v0.5.0]
• react-instantsearch version: [e.g. v6.10.3]
• React version: [e.g. 16.13.1]

[curquiza]

@CaroFG are you sure it does not come from react-isntantsearch, so on the algolia side?

[CaroFG]

A user said it appeared when he moved from Algolia to Meilisearch, see Discord. As I told the user, I guess Algolia uses by default the objectID they generate for each document, but since we don't use an objectID we should probably provide an example that does not trigger a warning.

[curquiza]

Thanks for the context! Pinging this as good first issue

[replyre]

Hello, may I work on this issue?

[CaroFG]

Go ahead @replyre!

[voronovmaksim]

Hi @replyre. any news?)

[curquiza]

Hello @voronovmaksim Not done yet, we are waiting for a PR 😊

[replyre]

hey @voronovmaksim, I looked through it but wasn't able to find the root of the issue. Sorry, I forgot to mention it earlier. I will look at it again if you wish on Saturday, as I'm busy right now. Thank you for your patience.

[dc-p8]

Had the same error. According to the instant-meilisearch readme, we need to add the primary key in the client config like so:

const {searchClient} = instantMeiliSearch(
    'http://localhost:7700/',
    'masterKey',
    {
        primaryKey: 'id',
        finitePagination: true,
    }
)

and the error was gone.