0

Background info:

I'm using react and Ant Design.

To keep the code clean, I populate menu items from a const array, like so:

const menuItems = [
  { label: "Home", path: "/home" },
  { label: "Accounts", path: "/accounts" },
  { label: "Organizations", path: "/organizations" },
];

Each item in the array is an object containing a label and a redirect path. I map over the items when rendering. Very basic.

Problem:

I would like to include an antd icon component in the menuItems array so the icon can be rendered next to the label. But I can't find a way to reference the icons by a name string

My problem is like this problem but is ant design Rendering Material-UI icons from an array

Any suggestions on how to do this? Thanks

Taghi Khavari
  • 6,272
  • 3
  • 15
  • 32
Four
  • 125
  • 1
  • 1
  • 9
  • 1
    you can have the icon component in your array objects as well – cmgchess Feb 04 '22 at 07:26
  • @cmgchess I just had a problem with this way if "const menuItems" is in another component, then when importing into the component you want to use "const menuItems" it will get an error => "Uncaught ReferenceError: React is not defined" – Four Feb 04 '22 at 08:40
  • if it is in a different component maybe try passing it down as a prop – cmgchess Feb 04 '22 at 08:45

1 Answers1

1

you can modify your menuItems to something like this:

 const menuItems = [
    { label: "Home", path: "/home", icon: <span class="custom-icon" /> },
    {
      label: "Accounts",
      path: "/accounts",
      icon: <span class="custom-icon" />
    },
    {
      label: "Organizations",
      path: "/organizations",
      icon: <span class="custom-icon" />
    }
  ];

and instead of using span with the class of custom-icon you can use any Icon you desire and then render it accordingly

Taghi Khavari
  • 6,272
  • 3
  • 15
  • 32
  • thanks but I just had a problem with this way if "const menuItems" is in another component, then when importing into the component you want to use "const menuItems" it will get an error => "Uncaught ReferenceError: React is not defined" – Four Feb 04 '22 at 08:40
  • @hieptran That's because you're using `jsx` and your react version is less than `17`, you can fix this by adding `import React from 'react'` at the top of the file where `const menuItems` is used – Taghi Khavari Feb 04 '22 at 08:57
  • thanks but It still can't load the icon and gives a new error and and I have fixed it with these methods but it still doesn't work (https://stackoverflow.com/questions/42813342/react-createelement-type-is-invalid-expected-a-string) there is an error => "react.development.js:315 Warning: React.createElement: 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." – Four Feb 04 '22 at 10:33
  • @hieptran add all the code in codesandbox.io and create a reproducible example of your problem so I could understand what your trying to achieve – Taghi Khavari Feb 04 '22 at 10:52