Clojurians Log v2
reagent
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.Menu>
<Dropdown.Item>Hello there!</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>;My question is how can I build the {NavItem} part?
reagent.core/reactify-component.
thanks @p-himik 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.
@victorbjelkholm429 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 🙂
@wvelezva Are you using something like react-bootstrap? It has a NavDropdown component https://react-bootstrap.github.io/components/navs/#nav-dropdown-props
@rberger, 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
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 https://stackoverflow.com/a/45941992 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.