This is a follow up to my previous question, but how do I call a function inside React's render() method, if I have a map inside that.
Example (this code is inside a class that extends React.Component):
getItemInfo(item){
return `${item.Something} ${item.SomethingElse}`
}
render() {
return (
<div className="someDiv">
{
collection.map(function (item) {
return <div> {item.Name} {this.getItemInfo(item)} </div>
})
}
</div>
);
}
No matter what I try I always end up getting "this.getItemInfo() is not a function".
I did a console.log on this inside my map() function and it was infact refering to the Window object, but I can't seem to find a way to change that.
I tired:
- defining
getItemInfoas function getItemInfo(){..} - passing
thisas a second parameter to my map function - calling
this.getItemInfo = this.getItemInfo.bind(this)in react's component constructor - calling
.bind(this)aftergetItemInfo(item)
And a couple other things....
None worked. I am fairly new to JavaScript's this reference, and I cant seem to figure it out.
I read some answers here related to using this inside render() but none of them seemed to work for me.
