How to map react icons from an array of objects

user_11249467 0
Viewed 67

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

reactjs
1 Answers

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'))
user_174637310
Related