Fork me on GitHub
Wilson Velez02:10:27

I’m trying to translate this piece of react-bootstrap code

<Dropdown as={NavItem}>
  <Dropdown.Toggle as={NavLink}>Click to see more…</Dropdown.Toggle>
    <Dropdown.Item>Hello there!</Dropdown.Item>

Wilson Velez02:10:01

My question is how can I build the {NavItem} part?



Wilson Velez14:10:21

thanks @U2FRKM4TW I didn’t work that way but it’s working now, I just passed the element


Don't think you need the :> here, just [Dropdown] will do.

Wilson Velez15:10:42

@UEJ5FMR6K why do you say it is not needed? Dropdown, Nav.Item, etc are react classes from React-Bootstrap library and they need to “read” by reagent . FYI: I tried removing the :> and it didn’t work.


sorry, was mixing :> with :<> for fragments, never mind my comment 🙂


@U9BUENJ1F Are you using something like react-bootstrap? It has a NavDropdown component

Wilson Velez22:10:28

@U07GPFFAS, yes, I’m using react-bootstrap, my problem with NavDropdown was that I needed an Image as the trigger to open the dropdown, and the only way was using the title prop but I don’t know how to write that in clojurescript

Wilson Velez22:10:13

but the code I posted earlier works the same, and the Dropdown.Toggle can receive a child image, icon in this case


The react-bootstrap docs say title is a node as “The content of the non-toggle Button.” which is kind of vague but I presume it means a DOM node. Potentially you could create the icon and use :ref attribute to get the DOM node of the icon and pass that in. But that is kind of funky. Did find this react-bootstrap example You could probably use any react-icon component instead of Glyphicon. One of the comments shows how to use react-icons, which is what we use.