CODEWITHSUNDEEP
reactjsreact-hooks
ZiiMakc
ZiiMakc

Reputation: 36806

Is it good idea to pass multiple components as a prop?

I have a two menu components: profile-menu and main-menu.

Each menu has links with icons and component-button to open it.

Is it good idea to pass multiple components as links array and than render it with map like in this example? if not, what is alternative?

const Icon = () => <div>1</div>

const Icon2 = () => <div>2</div>

const links = [{ href: '/', name: 'MainPage', icon: Icon }, { href: '/test', name: 'Test', icon: Icon2 }]

const MainMenu = () => {
  return (
    <Navigation side='left' links={links}>
      <img src='smt..' />
    </Navigation>
  )
}

const Profile = () => {
  return (
    <Navigation side='right' links={links}>
      <img src='smt..' />
    </Navigation>
  )
}

const Navigation = ({ side, links, children }) => {
  const menuRelayRef = useRef(null) // to close menu on page click

  // some logic

  return (
    <Fragment>
      {cloneElement(children, { ref: menuRelayRef })}

      <div show={show} side={side}>
        {links.map((l) => {
          const Icon = l.icon // is it ok?

          return (
            <div>
              <button>{l.name}</button>
              <Icon />
            </div>
          )
        })}
      </div >
    </Fragment>
  )
}

Upvotes: 0

Views: 267

Answers (1)

mortezashojaei
mortezashojaei

Reputation: 452

i think it depends on your Icon component :

if Icon component is img tag so you should pass only src,alt.

if Icon component is SVG icon so you should pass SVG icon component.

generally if your component has same parts, so try to DRY (Dont Repeat Yourself), and pass only dynamic parts of component.but sometimes you have no other way and passing component is best solution.

Upvotes: 1

Related Questions