Callback function within map

Question

I'm new to Reactjs and making a directory browsing application with Cordova and Reactjs.

Currently I get the error this.props.onClick is not a function, I figured out that 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 someone point this out?

Answer 1

In general - this is the "dynamic this" issue in JavaScript.

However, since you're using ReactJS with JSX, your code has support for ES6 arrow functions in the transform anyway:

var itemsInRepo = this.props.items.map(entry => (                
   <RepositoryEntry repositoryItem={entry} folderOnClick={this.updateListFromChild} />
));

You can see the syntax on MDN for more examples.

Answer 2

We can proceed with this way also. Here is the code snippet:

var itemsInRepo = this.props.items.map( 
        function(entry){                
            return(
             <RepositoryEntry 
               repositoryItem={entry} 
               folderOnClick={this.updateListFromChild} 
        />);