列表中的每个孩子都应该有一个唯一的“关键”道具/反应

Question

I am struggling get rid of this error message. What did I do wrong in my code? I can't see where else I should be adding a key.

import { AiOutlineLaptop } from "react-icons/ai";
import { FaBootstrap, FaReact } from "react-icons/fa";
const data = [
  { "Id": "1",
    "title": "Create Components",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": AiOutlineLaptop,
    "icon1": "fas fa-shopping-cart",
  },
  {
    "Id": "2",
    "title": "Data Input",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": "fas fa-circle fa-stack-2x",
    "icon1": "fas fa-laptop fa-stack-1x fa-inverse",
  },
  { "Id": "3",
    "title": " React Life Cycle Method",
    "text": "Lorem ipsum dolor sit amet consectetur.",
    "icon": "fas fa-circle fa-stack-2x",
    "icon1": "fab fa-btc fa-stack-1x fa-inverse",
  },

];

const icons = [
  AiOutlineLaptop,
  FaReact,
  FaBootstrap,
];


const Skills = () => {
  return (
    <>
      <section className="page-section" id="services">
        <div className="container">
          <div className="text-center">
            <h2 className="section-heading text-uppercase">Skills</h2>
            <h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
          </div>
          <div className="row text-center">

            {data.map((link, idx) => {
              const Icon = icons[idx];
              return (
                <div className="col-md-4">
                  <Icon className="icon" key={icons[idx]} />
                  <h4 className="my-3" key={idx}>{link.title}</h4>
                  <p className="text-muted">{link.text}</p>
                </div>
              )
            })}

          </div>
        </div>
      </section>
    </>
  );
}

export default Skills;  

Answer 1

Every item in the iteration needs a unique identifier for React's internal working. Add key to the outermost element

<div className="col-md-4" key={link.id}>

Answer 2

When using map to render components in React you should always provide a unique key to the top element, in your case, the simple way of doing it would be using the index (idx) like so

 {data.map((link, idx) => {
          const Icon = icons[idx];
          return (
            <div key={idx} className="col-md-4">
              <Icon className="icon" key={icons[idx]} />
              <h4 className="my-3" key={idx}>{link.title}</h4>
              <p className="text-muted">{link.text}</p>
            </div>
          )
        })}