react-dropdown icon indicating copy to clipboard operation
react-dropdown copied to clipboard

[QUESTION] How to use anchor as menu item

Open erzzo opened this issue 4 years ago • 2 comments

Hey, The dropdown menu is working great but I'm struggling to change the menu item to a anchor. I've changed the element like in the example:

   <MenuItem
      componentClass={Link}
      href="/reports"
    >
      Button Label
    </MenuItem>

and the result is:

image

The href attribute is not applied to the parent element. How can I achieve this? Thanks for help

erzzo avatar Mar 15 '21 17:03 erzzo

Hi @erzzo ,

Could you please try this?

<MenuItem
  componentClass={() => <Link href="/some/url">Link</Link>}
>
  Button label
</MenuItem>

Ginioo avatar Mar 16 '21 08:03 Ginioo

@Ginioo I've tried something like that earlier:

<MenuItem
  componentClass={() => <Link href="/some/url" />}
>
  Button label
</MenuItem>

But it didn't compile. The missing children was the problem. When I tried your example, it did work but it will replace the whole element. So I needed to pass the props. It's working but it's little bit messy.

<MenuItem
  componentClass={(props) =>
    <div {...props}>
      <Link to={submenuItem.internalLink} {...props.children[0].props}>
         Label
      </Link>
    </div>
  }
/>

I will play more with it, probably this can be something the package could do nativly. Realy thanks for your help

erzzo avatar Mar 16 '21 16:03 erzzo