MDBReact - SideNavCat - how to make onClick handler work?


Topic: MDBReact - SideNavCat - how to make onClick handler work?

tomasz1253 pro asked 6 years ago

Hi! I want to add some additional behaviour to SideNavCat in MDBReact. Here is code fragment from SideNav MDBReact example: <SideNavCat id="instruction-cat" name="Instruction" icon="hand-pointer-o" href="#"> <SideNavLink>For bloggers</SideNavLink> <SideNavLink>For authors</SideNavLink> </SideNavCat> I want to add onClick handler, (example below) to SideNavCat but its not even triggered :/
<SideNavCat onClick={this.exampleFunction} id="instruction-cat" name="Instruction" icon="hand-pointer-o" href="#">
  <SideNavLink>For bloggers</SideNavLink>
  <SideNavLink>For authors</SideNavLink>
</SideNavCat>
When I'm clicking on SideNavCat this.exampleFunction is not being fired. How to fire onClick before SideNavLinks inside SideNavCat appear? I also find out that the same goes for SideNavLink onClick handler on SideNavLinks doesnt work. How can I make it work also for SideNavLinks?  

Jakub Mandra staff premium answered 6 years ago

<SideNavLink to="/route4">Link</SideNavLink>
it is the react-routers <Link> component.
You can use <SideNavItem> which renders simple <a> component, or you can add 'tag' property which will replace this component.
<SideNavItem onClick={this.sideNavItemClick}>Instruction</SideNavItem>
Regards, Jakub

tomasz1253 pro commented 6 years ago

Now it's working, thank you :)

Jakub Mandra staff premium answered 6 years ago

Hello,   Those components have onClick handler already set (open/close functionality), so you can't add another one. What do you want to achieve? Maybe we will find another solution?   Best regards, Jakub

tomasz1253 pro commented 6 years ago

I want to change component State in which SideNav is. For example calculate something and show in diffrent component. Is it possible to fire some kind of Event from them? If not - then how to change route or/and (if possible) hash value? Will it be possible in future releases? Best, Tomek

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.7.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No