React: Warning Each Child In A List Should Have A Unique Key

I have been debugging this and started losing hair. So far I haven't found a solution yet. This the Teaser component. I was initally writing tests for Home component, but it had so

Solution 1:

It's definitely an array key issue, but it seems you have unique alt attributes in each data set (array).

<StyledHorizontalScrollListcolumns={columns}>
  {tunesTeasers.map(teaser => teaser.noTonieboxes ? (
    <Listkey={teaser.alt}onClick={toggleModal}><TeaserCardalt={teaser.alt}src={teaser.src} /></List>
  ) : (
    <StyledLinkkey={teaser.alt}to={teaser.link}><TeaserCardalt={teaser.alt}src={teaser.src} /></StyledLink>
  )}
</StyledHorizontalScrollList>

Solution 2:

Likely related to tunesTeasers.map. A react key needs to be on the outer-most element mapped, the Fragment in this case. The teaser link appears to be unique within the set, but if it isn't, you may need to provide a unique id property to the elements to use as a react key.

{tunesTeasers.map(teaser => {
  return (
    <Fragmentkey={teaser.link}>
      {teaser.noTonieboxes ? (
        <Listkey={teaser.alt}onClick={toggleModal}><TeaserCardsrc={teaser.src}alt={teaser.alt} /></List>
      ) : (
        <StyledLinkkey={teaser.alt}to={teaser.link}><TeaserCardsrc={teaser.src}alt={teaser.alt} /></StyledLink>
      )}
    </Fragment>
  )
})}