React "Warning: Encountered two children with the same key" error in the console-CodePudding

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

For example:

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 the code for build 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 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

CodePudding user response：

It is because when you render a list of component in a map, each component should have a unique key property. It is for React to distinct them. Try doing 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>

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}
    />
  );
}