Fork me on GitHub
Slack Archive

This page is not created by, affiliated with, or supported by Slack Technologies, Inc.

2020-10-13

Channels

#reagent
<
2020-10-13
>
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>
  </Dropdown.Menu>
</Dropdown>;
from https://react-bootstrap.netlify.app/components/navs/#using-dropdowns

Wilson Velez02:10:01

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

p-himik08:10:19

reagent.core/reactify-component.

Wilson Velez14:10:21

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

victorb15:10:26

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.

victorb16:10:30

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

rberger22:10:29

@U9BUENJ1F Are you using something like react-bootstrap? It has a NavDropdown component https://react-bootstrap.github.io/components/navs/#nav-dropdown-props

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

rberger22:10:32

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.