What do I need to utilize Component how props?-CodePudding

I have array of object

const userProfileRoutes = [
 {
  id: 0,
  path: "userInfo",
  name: "My profile",
  icon: CgProfile, // from react-icons
 },
 {
  id: 1,
  path: "adminPanel",
  name: "Admin panel",
  icon: MdAdminPanelSettings, // from react-icons
 },
 { id: 2, path: "editPanel", name: "Edit profile", icon: AiTwotoneSetting // from react-icons },
 { id: 3, path: "cart", name: "Cart", icon: AiOutlineShoppingCart // from react-icons },
];

and I use this array here

 {userProfileRoutes.map(({ id, path, name, icon }) => (
      <>
        // here I'd like to use icon props
        <MenuItem key={id} link={path}>
          {name}
        </MenuItem>
      </>
    ))}

I'd like to use icon props how component because it's component
What do I need for this?

CodePudding user response：

You just need to capitalize the first letter of the icon name. This can be done during destructuring:

{userProfileRoutes.map(({ id, path, name, icon: Icon }) => (
  <>
    <Icon />
    <MenuItem key={id} link={path}>
      {name}
    </MenuItem>
  </>
))}

Source: https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

CodePudding user response：

{
    userProfileRoutes.map(({ id, path, name, icon }) => (
        <>
            <icon />
            <MenuItem key={id} link={path}>
                {name}
            </MenuItem>
        </>
    ));
}