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

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