Calling functions inside a map() function in React render() [duplicate]

Question

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 getItemInfo as function getItemInfo(){..}
• passing this as a second parameter to my map function
• calling this.getItemInfo = this.getItemInfo.bind(this) in react's component constructor
• calling .bind(this) after getItemInfo(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.

Answer 1

collection.map(function (item) {
    return <div> {item.Name} {this.getItemInfo(item)} </div>
})

So, the scope of this inside your function(item) is not the scope of your React Component.

If you use arrow function () => {...} instead of function() {...} you will have access to this of React.Component.

Try this

collection.map((item) => (
   <div> {item.Name} {this.getItemInfo.call(this, item)} </div>
))

To read more about scope of this in javascript, you can read here: http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/

To read about arrow functions and scope of this, refer to "No separate this " section of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions