Callback function within the map
I am new to Reactjs and am making a directory viewer app using Cordova and Reactjs.
I am currently getting an error this.props.onClick is not a function
, I figured out there this.props.onClick
is undefined. Check my code below:
var RepositoryList = React.createClass({
//updating the list from a child folder entry
updateListFromChild:function(childFolder){
console.log("in parent update");
},
render:function(){
console.log(this.updateListFromChild); //function()
var itemsInRepo = this.props.items.map(function(entry){
console.log("in map: " + this.updateListFromChild); //undefined
return (
<RepositoryEntry repositoryItem={entry}
folderOnClick={this.updateListFromChild} />
);
});
return (
<ul className="table-view">
{itemsInRepo}
</ul>
);
}
});
The property folderOnClick
is undefined. But I don't know how to solve this problem. Can anyone point this out?
+3
source to share
1 answer
In general, this is a "dynamic problem" in JavaScript .
However, since you are using ReactJS with JSX, your code has support for ES6 arrow functions in the transform:
var itemsInRepo = this.props.items.map(entry => (
<RepositoryEntry repositoryItem={entry} folderOnClick={this.updateListFromChild} />
));
See MDN syntax for details .
+6
source to share