How to add a className to a reactjs component that is inside an array?

Question

I have an array that contains objects containing icon component and titles like this :

 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" },

  ];

I have to write className="skill-icon" to every component... I tried this way of adding className but this didn't work:

skills.map((add_class) => {
    add_class.icon.add.classList("myClass");
    console.log(add_class);
  });

Should we have to write className='skill-icon' inside that array like I'm doing or is there any other way to iterate over all the component and add className ?

My HTML looks like this :


      <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>

Dennis Vash · Accepted Answer · 2022-08-14 07:49:11Z

5

Instead of creating a React.Node (by calling <Component/> which is a synthetic sugar for React.createElement) in your skills array, you can assign the component itself.

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

edited Aug 14, 2022 at 7:49

answered Aug 14, 2022 at 7:39

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saran Pariyar Over a year ago

It worked! Thank you very much sir I learned new way of using component in array :)

Collectives™ on Stack Overflow

How to add a className to a reactjs component that is inside an array?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related