Element type is invalid: expected a string (for built-in components) or a class/function. while tryi-CodePudding

` Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of DashboardCards.

Im trying to have icons and labels in a common file constants/drawer

import DashboardIcon from "@mui/icons-material/Dashboard";

export const MainMenuItems = [
  {
    label: "Dashboard",
    icon: <DashboardIcon />,
    redirectLink: "/",
  },
];

and in the main.js file importing them and trying to map them.

Here i want to pass some props to Icon like <Icon size="small"/>.

import { MainMenuItems } from "../constants/drawer.js";
const MainContainer=()=>{

return (
<>

     {MainMenuItems.map(({label,icon:Icon}) => {
        
          return (
              <div>
<Icon size="small"/>

              </div>
            )
          );
        })}

</>
)

}

CodePudding user response：

The Icon variable holds the component, you just need to execute it in the main.js file.

import { MainMenuItems } from "../constants/drawer.js";
const MainContainer = () => {
    return (
        <>
            {MainMenuItems.map(({ label, icon: Icon }) => {
                return <div>{Icon}</div>;
            })}
        </>
    );
};

UPDATE

If you want to pass props to the component, I suggest you to just save the component reference to the icon property.

import Drawer from "@mui/material/Drawer";

export const MainMenuItems = [
  {
    label: "Dashboard",
    icon: DashboardIcon,
    redirectLink: "/",
  },
];

main.js

import { MainMenuItems } from "../constants/drawer.js";
const MainContainer = () => {
    return (
        <>
            {MainMenuItems.map(({ label, icon: Icon }) => {
                return <div><Icon size="small" /></div>;
            })}
        </>
    );
};

CodePudding user response：

You need to write import statement for <DashboardIcon /> in constants/drawer.js

import DashboardIcon from '@mui/icons-material/Dashboard';

export const MainMenuItems = [
  {
    label: "Dashboard",
    icon: <DashboardIcon />,
    redirectLink: "/",
  },
];

In main.js, we have to execute Icon as a value Icon have component in it.

import { MainMenuItems } from "../constants/drawer.js";

const MainContainer = () => {
   return (
    <>
     {MainMenuItems.map(({label, icon: Icon}) => {  
          return (
              <div>
               {Icon}
              </div>
            )
          );
      })}
    </>
   );
}