Hello, I'm Nono.
I would like to show you how to handle components with the Value of an Object in React.

How to handle components with an Object's Value

What I want to achieve

What I want to achieve this time is to "use the icons of react-icons skills in the skills list of the portfolio ".
The icons of react-icons are handled by components as follows.

import { SiTailwindcss } from "react-icons/si"; 
~~~~~~~~~~~~~~~~~~~~~~~~ 

<div> <SiTailwindcss/> </div> 

This time, there are 12 skills in the skill list, and writing all of them would be redundant, so I wanted to handle the icon component as an array of Objects.
I tried to write it as follows, but it could not be used because of an error.

// utils/const.ts 
export const skillList = [ 
  { title: "HTML5", icon: <SiHtml5/> }, 
  { title: "CSS3", icon: <SiCss3/> }, 
  { title: "TailwindCSS", icon: <SiTailwindcss/> },
 ...
 ];

Solution

Upon investigation, I found that it can be handled by writing the component name as it is, without the tag parentheses.

// utils/const.ts export const skillList = [ 
  { title: "HTML5", icon: SiHtml5 }, 
  { title: "CSS3", icon: SiCss3 }, 
  { title: "TailwindCSS", icon: SiTailwindcss },
 ... 
];

When you want to display it, write the following.

// pages/index.tsx 
<Grid>
  {skillList.map((skill) => (
    <Grid.Col span={4} xs={3} sm={2} key={skill.title}>
      <div className="p-2 text-center">
        <skill.icon className="h-auto w-4/5 text-light" />
        <p>{skill.title}</p>
      </div>
    </Grid.Col>
  ))}
</Grid>

It's better to handle components by name than by component since it allows for more flexibility in adding classes, etc.!