Estoy luchando para deshacerme de este mensaje de error. ¿Qué hice mal en mi código? No puedo ver dónde más debería estar agregando una clave.
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;Cada elemento de la iteración necesita un identificador único para el funcionamiento interno de React. Agregar key al elemento más externo
<div className="col-md-4" key={link.id}>Cuando use el mapa para representar componentes en React, siempre debe proporcionar una clave única para el elemento superior, en su caso, la forma simple de hacerlo sería usar el índice (idx) así
{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> ) })}