How to pass click event to parent component?


#1

Hi all
I have to following component:

let component = ReasonReact.statelessComponent("NavItemView");

let make = (~text: string, ~clickLink: ReactEventRe.Mouse.t => unit ,children) => {
  ...component,
  render: (_self) => {
    <li className="nav-item">
      <a className="nav-link" onClick=clickLink>
        {children}
        <span className="pl-3 nav-link-text">{ReasonReact.string(text)}</span>
      </a>
    </li>
  }
};  

I would like to pass the click event to the parent I tried as following:

let handleNavbarItemClick = (_event, _self) => Js.log("clicked!");

let make = (_children) => {
  ...component,
  render: _self => {
  <nav className="navbar navbar-expand-lg fixed-top" id="mainNav">
    <a className="navbar-brand" href="#">{ReasonReact.string("Logo")}</a>
    <NavbarTogglerView />
    
    <div className="collapse navbar-collapse" id="navbarToggler">
      <ul className="navbar-nav navbar-sidenav">
        <NavItemView text="Overview" clickLink=handleNavbarItemClick>
          ...<img src={ovLogo'} height="40" width="40"/>
        </NavItemView>
        <NavItemView text="Stocks" clickLink=handleNavbarItemClick>
          ...<img src={stockLogo'} height="40" width="40"/>
      </NavItemView>
      </ul>
      <SidebarTogglerView />
    </div>
  </nav>
  }
};

The compiler complains:

This call is missing an argument of type 'a  

What am I missing?

Thanks


#2

Did you mean to wrap clickLink = handleNavbarItemClick with a self.handle, like:

clickLink=self.handle(handleNavbarItemClick)

#3

It looks like your function is calling for aruguments that are required, not optional? The event will be called with the event as an argument, it’s not getting the second required argument of an unknown type.

Try this