CODEWITHSUNDEEP
javascriptreactjskey
arctic
arctic

Reputation: 809

Each child in a list should have a unique key prop

Here is a link to a working example of the site: https://codesandbox.io/s/eloquent-kapitsa-kk1ls

The issue I am having is with Buttons.js:

import React, { Component } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import registerIcons from "./FontAwesome";

registerIcons();

const DATA = [
  {
    href: "https://github.com/",
    icon: ["fab", "github"],
    label: "Github"
  },
  {
    href: "https://www.linkedin.com/in//",
    icon: ["fab", "linkedin"],
    label: "LinkedIn"
  },
  {
    href: "...",
    icon: ["fas", "file-alt"],
    label: "Resume"
  },
  {
    href: "mailto:",
    icon: ["fas", "paper-plane"],
    label: "Email me"
  }
];

const Icon = ({ href, icon, label }) => {
  return (
    <span className="button">
      <a href={href} target="_self" rel="noopener noreferrer">
        <FontAwesomeIcon className="icon" icon={icon} size="3x" />
        <span className="icon_title">{label}</span>
      </a>
    </span>
  );
};

class Buttons extends Component {
  render() {
    return (
      <div>
        {DATA.map(props => (
          <Icon {...props} />
        ))}
      </div>
    );
  }
}

export default Buttons;

I have looked through the other topics related to this issue and none are analogous to my case. I am not passing parameters to the render method - just taking an existing variable and mapping it to produce my output.

I have tried changing the Buttons render method to the code below in addition to a few other permutations of the DATA array without much progress.

      <div key={DATA.label}>
        {DATA.map(props => (
          <Icon {...props} />
        ))}
      </div>

I have also read through the React documentation on keys with no success.

Upvotes: 0

Views: 452

Answers (4)

EvanMorrison
EvanMorrison

Reputation: 1217

The key needs to go on like this:

<div key={DATA.label}>
 {DATA.map(props => (
   <Icon key={props.label} {...props} />
  ))}
</div>

As you probably saw in the React documentation on keys you reference, they say

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings.

Each of the objects in your DATA array have unique strings and you can use any of them key={props.href} or key={props.icon[1]}. I used props.label in the answer above but the point is it doesn't have to be totally unique in all the world, it just needs to be unique compared to the other items in the list.

Upvotes: 1

Mario
Mario

Reputation: 4988

Try

<Icon {...props} key={props.href} />

From react documentation

A good rule of thumb is that elements inside the map() call need keys.

Please take a look to this documentation

https://reactjs.org/docs/lists-and-keys.html#extracting-components-with-keys

Upvotes: 1

manish kumar
manish kumar

Reputation: 4692

As it is advised not to use index as a key for component. I would say add a random number and do something like below

<div>
   {DATA.map((props,i) => (
      <Icon key={Math.random()*1000*i} {...props} />
   ))}
</div>

This is rather a generic approach if you don't have any unique key in your object.

Upvotes: 1

Mohsen Niknam Pirzadeh
Mohsen Niknam Pirzadeh

Reputation: 451

you should change the code with this:

<div>
   {DATA.map((props,i) => (
      <Icon key={i} {...props} />
   ))}
</div>

Upvotes: 3

Related Questions