Tengo una matriz que contiene objetos que contienen un componente de icono y títulos como este:
const skills = [ { icon: <FaHtml5 className="skill-icon" />, title: "HTML5" }, { icon: <FaCss3 className="skill-icon" />, title: "CSS3" }, { icon: <SiJavascript className="skill-icon" />, title: "JavaScript" }, { icon: <FaReact className="skill-icon" />, title: "ReactJS" }, { icon: <SiBootstrap className="skill-icon" />, title: "Bootstrap" }, ];Tengo que escribir className="skill-icon" para cada componente... Intenté esta forma de agregar className pero no funcionó:
skills.map((add_class) => { add_class.icon.add.classList("myClass"); console.log(add_class); });¿Deberíamos escribir className='skill-icon' dentro de esa matriz como lo estoy haciendo o hay alguna otra forma de iterar sobre todo el componente y agregar className?
Mi HTML se ve así:
<section className="skill-card-section"> {skills.map((skill) => { //iterating over all the skills from that skills array return ( <section className="skill-card" key={skill.title}> {skill.icon} <p className="skill-title">{skill.title}</p> </section> ); })} </section>En lugar de crear un React.Node (llamando a <Component/> que es un azúcar sintético para React.createElement ) en su matriz de habilidades, puede asignar el componente en sí.
const skills = [ { iconComponent: FaHtml5, title: "HTML5" }, { iconComponent: FaCss3, title: "CSS3" }, { iconComponent: SiJavascript, title: "JavaScript" }, { iconComponent: FaReact, title: "ReactJS" }, { iconComponent: SiBootstrap, title: "Bootstrap" }, ]; <section className="skill-card-section"> {skills.map((skill) => { const Component = skill.iconComponent; return ( <section className="skill-card" key={skill.title}> <Component className="skill-icon" /> <p className="skill-title">{skill.title}</p> </section> ); })} </section>;