CODEWITHSUNDEEP
javascriptreactjs
Drsaud
Drsaud

Reputation: 425

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

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?

Upvotes: 9

Views: 21172

Answers (1)

Youssouf Oumar
Youssouf Oumar

Reputation: 45825

When you render a list of components with map(), each component should have a unique key property. It is for React to distinguish 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 have one. You can use key = {v._source.newsid} if v._source.newsid is a unique field.

For more visit keys section on the official documentation.

Upvotes: 7

Related Questions