React.js "Each child in a list should have a unique "key" prop."

Question

I'm having issues adding a key to my list. When I use index I get the error: "Each child in a list should have a unique "key" prop.".

const selectPfp = pfps?.map((e: string, i:number) => {
return (
  <>
    <PfpOption
    key={i}
      active={selectedPFP && selectedPFP === e}
      src={e}
      onClick={() => {
        setSelectedPFP(pfps[i]);
        console.log("clicked");
      }}
    />
  </>
);

})

@SakibulAnwar Bad idea https://stackoverflow.com/questions/29808636/when-giving-unique-keys-to-components-is-it-okay-to-use-math-random-for-gener — CertainPerformance, Jul 30 '22 at 14:55
@SakibulAnwar thank you for the reply. Sadly this didn't work either, I feel like it's ignoring the key entirely for some reason. — Joe Ellul-Turner, Jul 30 '22 at 14:57
Beware using the index as a key, see @GiorgiMoniava's link for why, and thr blog post that page links to. — T.J. Crowder, Jul 30 '22 at 14:58

CertainPerformance · Answer 1 · 2022-07-30T15:00:23.263

The key must be put into the outermost component's prop when returning from a .map. Here, the outermost component is the plain fragment, so do

return (
  <React.Fragment key={i}>
    <PfpOption
      active={selectedPFP && selectedPFP === e}
      ...

That said, because there's only one child of the fragment, it's completely superfluous; you may remove it entirely and do

const selectPfp = pfps?.map((e: string, i: number) => {
    return (
        <PfpOption
            key={i}
            active={selectedPFP && selectedPFP === e}
            src={e}
            onClick={() => {
                setSelectedPFP(pfps[i]);
                console.log("clicked");
            }}
        />
    );
})

Because e is the item in the array being iterated over, you can also replace pfps[i] with e. (you could also consider using a more precise variable name to make it more clear - maybe pfp?)

React.js "Each child in a list should have a unique "key" prop."

1 Answers1