React map function not assinging keys properly

user_16913824 0
Viewed 151

for some reason, I get the "each child in a list should have unique key" error when returning the following code. I do not understand why this happens, as I specifically assign the key during mapping:

return (
        <>
            {sortfeedCards(feedCards)}
            {loggedIn === true ? (feedCardsMod.map((card, index) => (
                <>
                    <p>{index}</p>
                    <FeedCard key={index} cardData={card} loggedIn={loggedIn} />
                </>
            ))) : ('')}
        </>
    )

And here's what the render looks like.. it seems to me that the index-variable does work: A picture of the feed showing correct index numbers

Many Thanks in advance!

reactjs key javascript
2 Answers

The key needs to be on the outermost element, so on the Fragment, not the FeedCard:

feedCardsMod.map((card, index) => (
  <React.Fragment key={index}>
    <p>{index}</p>
    <FeedCard cardData={card} loggedIn={loggedIn} />
  <React.Fragment/>
))

(The shorthand syntax <></> for fragments doesn't allow keys, so i switched to using React.Fragment explicitly)

user_37948120

Try this:

return (
    <>
        {sortfeedCards(feedCards)}
        {loggedIn === true ? (feedCardsMod.map((card, index) => (
            <div key={index}>
                <p>{index}</p>
                <FeedCard cardData={card} loggedIn={loggedIn} />
            </div>
        ))) : ('')}
    </>
)

Keys must be unique amongst the enclosing tags: https://reactjs.org/docs/lists-and-keys.html

user_167165870
Related