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







All Articles