Home Element type is invalid: expected a string (for built-in components) or a class/function. while trying to render a component

Questions

Element type is invalid: expected a string (for built-in components) or a class/function. while trying to render a component

byMR

October 25, 2022

`
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>
            )
          );
        })}

</>
)

}

>Solution :

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>;
            })}
        </>
    );
};