How to pass a method to a child react component? - reactjs

Question

folks!
I'm starting to construct an app with webpack, react, redux, etc. And im not sure if im facing the situation as i should:
I want to develop a single page app, having a single react node "<myApp/>" that will contain everything inside. The first thing that will appear on my page, is a bootstrap navbar. What i want, is to create a react component that renders the navbar and to pass him 1) a list of strings, and 2) a function that should be called when one of that items is clicked. I want to do it in that way, because i would like to track at top level the "page" where i am (it will be always one of the navbar items).
Here my myApp component:
export default class myApp extends React.Component {
constructor(props) {
super(props);
this.handleNavbarClick = ::this.handleNavbarClick;
this.state = {
currentPage: 'Home',
navbarItems : ['Home', 'contact', 'etc']
};
}
handleNavbarClick(e) {
//debug alert:
alert(e);
this.state.currentPage = e;
}
render() {
return (
<div>
<NavBar items={this.state.navbarItems} itemClickHandler={this.handleNavbarClick}/>
<Wellcome />
<LandingMenu />
CurrentPage: {this.state.currentPage}
</div>
);
}
}
and here my navbar component:
export default class NavBar extends React.Component {
constructor(props) {
super(props);
}
render() {
var handler = this.props.itemClickHandler;
var itemsHtml = this.props.items.map(function(i) {
return <li className="nav-item"> <a className="nav-link" onClick={handler(i)}>{i}</a></li>
});
return (
<nav className="navbar navbar-static-top navbar-dark bg-inverse">
<a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>
<ul className="nav navbar-nav">
{itemsHtml}
</ul>
</nav>
)
}
}
As it is, when i click one of the navbar items, nothing happens, but when the page loads, the alert of the function handleNavbarClick is automatically called for each item, and i have no idea why :(
Can somebody please tell me what im doing wrong? im facing the problem in the right way?
Thanks in advance,
John
#janaka-stevens, #Jamby, Thank you!
Applying some changes from your answers, i was able to get the name out by storing it on the attribute "id" and accessing it throw e.target.id.
For this case that's fine, but supose that instead of work with simple strings, i would like to work with an array of more complex objects, let's say:
[
{ name: 'home', url: '/someroute', importantData: {...} },
{ name: 'otherLink', url: '/someOtherroute' , importantData: {...} }
]
and i would like to pass the complete selected object to the parent, myApp?
At the moment, it looks like that:
on myApp:
...
handleNavbarClick(e) {
this.setState({currentPage : e.target.id}) ;
}
...
and on the NavBar:
...
renderNavItem(item) {
return (<li className="nav-item">
<a id={item} className="nav-link" onClick={this.props.itemClickHandler}>{item}</a>
</li>)
}
render() {
return (
<nav className="navbar navbar-static-top navbar-dark bg-inverse">
<a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>
<ul className="nav navbar-nav">
{this.props.items.map(this.renderNavItem, this)}
</ul>
</nav>
)
}
...
but if on the <a> tag, instead of to use:
onClick={this.props.itemClickHandler}
i use:
onClick={this.props.itemClickHandler(item)}
the itemClickHandler is called on each render iteration, as react would "call" the method when iterating through the items to display them (without any user interaction).... any idea why?
Thanks in advance,
John

Answer 1

I'm going to suggest some changes to your code to make it more readible:
For the itemClickHandler you use something other than (e) because e usually means event. For that you should do itemClickHandler(page).
And then inside the Navbar component, you probably want to do something like this:
export default class NavBar extends React.Component {
constructor(props) {
super(props);
}
renderNavItem(item) {
<li className="nav-item">
<a className="nav-link" onClick={this.props.handleNavbarClick(item)}>{item}</a>
</li>
}
render() {
return (
<nav className="navbar navbar-static-top navbar-dark bg-inverse">
<a className="navbar-brand" href="#"><img src={LogoSrhSmall} /></a>
<ul className="nav navbar-nav">
{this.props.items.map(this.renderNavItem)}
</ul>
</nav>
)
}
}
BUT the main thing you're doing wrong is that you're NEVER setting state.
The #1 rule in React is you never want to alter a prop or a state (by doing this.prop.whatever = blar or this.state.whatever = blar. If you do that, then nothing will change and components you're passing props or state to may not have the correct information. So if you want to change state you must call this.setState({currentPage: page}).
So inside your handleNavbarClick you want to change it to:
handleNavbarClick(page) {
//debug alert:
alert(page);
this.setState({currentPage: page});
}
This will tell React that you've changed state and wish to re-render.

Answer 2

You have two problems. The first is the e in handleNavbarClick(e) is event. What you would want to do is have an identifier for each of your items list. Then you would get e.target.id. Of course you will also need to add the id in your mapped list. The second problem is you need to pass 'this' to your mapped list like so;
render() {
var itemsHtml = this.props.items.map(function(i) {
return <li className="nav-item"> <a id={i.id} className="nav-link" onClick={this.props.itemClickHandler}>{i}</a></li>
}, this);
Note the second parameter in map.

Answer 3

I had the problem where the handlers ran by themselves without actually clicking the buttons. I was calling the handler with an argument like you were are first. I removed that, and the behavior stopped. I tried the bind(null, props) trick and it worked for the props, but I didn't know how to access the event itself in the handler so I could e.preventDefault().
After looking for a minute, I found this gem, which iterates through all the unnamed arguments a function has received.
for (var i=0; i<arguments.length; i++) {
console.log(arguments[i])
};
Using this, I could access the event in the handler with
e = arguments[1]
and now all is well.
Thanks for giving me a starting point!