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!