meilisearch / meilisearch-react

https://www.meilisearch.com/
MIT License
196 stars 9 forks source link

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

Open CaroFG opened 6 months ago

CaroFG commented 6 months ago

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.

Screenshot 2024-04-23 at 15 07 52

Environment (please complete the following information):

curquiza commented 6 months ago

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

CaroFG commented 6 months ago

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 commented 6 months ago

Thanks for the context! Pinging this as good first issue

replyre commented 6 months ago

Hello, may I work on this issue?

CaroFG commented 6 months ago

Go ahead @replyre!

voronovmaksim commented 2 months ago

Hi @replyre. any news?)

curquiza commented 2 months ago

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

replyre commented 2 months ago

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.