How to map react icons from an array of objects

Question

This is the import of the icons

import { HiAnnotation, HiCog, HiColorSwatch } from "react-icons/hi";

This is the array with all the objects

const quickMenu = [
     { title: "Users", path: "/path", img: /hero icon/ },
     { title: "Products", path: "/products", img: /hero icon/ },
     { title: "Transactions", path: "/transactions", img: /hero icon/ },
     { title: "Reports", path: "/reports", img: /hero icon/ },
  ];

and this is where I want to render the array

<ol className="flex flex-col text-white">
     /Here/
</ol>

thank you in advance

Could you update your question so as to include what is expected — Pratik Wadekar
– Pratik Wadekar, Commented Jul 21, 2022 at 16:54

Krystian Sztadhaus · Accepted Answer · 2022-07-21 17:00:16Z

2

The question is not clear, but I hope this will help

import { render } from 'react-dom'
import { HiAnnotation, HiCog, HiColorSwatch } from 'react-icons/hi'

const quickMenu = [
  { title: 'Users', path: '/path', Icon: HiAnnotation },
  { title: 'Products', path: '/products', Icon: HiCog },
  { title: 'Transactions', path: '/transactions', Icon: HiColorSwatch }
]

function App() {
  return (
    <ol className="flex flex-col text-white">
      {quickMenu.map(menuItem => {
        const { title, path, Icon } = menuItem
        return (
          <li key={title}>
            <a href={path}>
              <Icon />
            </a>
          </li>
        )
      })}
    </ol>
  )
}

render(<App />, document.getElementById('root'))

answered Jul 21, 2022 at 17:00

Krystian Sztadhaus

4942 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

hassan bulega · Accepted Answer · 2023-08-10 07:04:29Z

You could have the icon as a JSX.Element in the quickMenu array before mapping.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HiAnnotation, HiCog, HiColorSwatch } from 'react-icons/hi'

const quickMenu = [
  { title: 'Users', path: '/path', Icon: <HiAnnotation /> },
  { title: 'Products', path: '/products', Icon: <HiCog /> },
  { title: 'Transactions', path: '/transactions', Icon: <HiColorSwatch /> }
]

const App = () => (
    <ol className="flex flex-col text-white">
      {quickMenu.map(item => {
        return (
          <li key={item.title}>
            <a href={item.path}>
              {item.Icon}
            </a>
          </li>
        )
      })}
    </ol>
  )


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Collectives™ on Stack Overflow

How to map react icons from an array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related