React "Warning: Encountered two children with the same key"

user_11037428 0
Viewed 6421

I have a React app that mapping cards and each card have unique id although I'm getting error in console that some are not unique:

Warning: Encountered two children with the same key, 2294264. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Here is the code for building my card structure:

function CreateCards(doc) {
  return (
    <SimpleCard
      key={doc.newsid}
      theCardId={doc.newsid}
      categorietitle={doc.categorietitle}
      newstitle={doc.newstitle}
      date={format(new Date(doc.date), "dd/MM/yyyy")}
      thenews={doc.thenews}
      newsurl={doc.newsurl}
    />
  );
}

And here is the code for mapping the cards:

      <div className="general-card1">
        {this.state.noPlaceFound ? (
          <h3 className="noPlaceFound">
            <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i>
            لا يوجد نتائج
          </h3>
        ) : (
          this.state.WasMap.map((v) => CreateCards(v._source))
        )}
      </div>

Can you please help me?

reactjs javascript
1 Answers

When you render a list of components in a map(), each component should have a unique key property. It is for React to distinct them.

Rendering a todo list for example:

{todos.map((todo) => (<li key={todo.id}>{todo.text}</li>))}

What you did wrong is that you added the key inside the component, where it should be when rendering inside map(), like so:

<div className="general-card1">
  {this.state.noPlaceFound ? (
    <h3 className="noPlaceFound">
      <i className="fas fa-exclamation-circle fa-sm WarnIcon"></i> لا يوجد نتائج
    </h3>
  ) : (
    this.state.WasMap.map((v, index) => (<CreateCards doc={v._source} key={index} />))
  )}
</div>

Notice that key = {index}. This would work, but it's better to use a custom id if you had one. You can use key = {v._source.newsid} if v._source.newsid is an unique field.

For more visit keys section on the official documentation.

user_152886410
Related