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;
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}>
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>
)
})}