Clojurians Log v2

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>
    &lt;Dropdown.Item&gt;Hello there!&lt;/Dropdown.Item&gt;
  &lt;/Dropdown.Menu&gt;
&lt;/Dropdown&gt;;

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.