title: Calling functions inside a map() function in React render()
body: <p>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.</p>
  
  <p>Example (this code is inside a class that extends <code>React.Component</code>):</p>
  
  <pre><code>getItemInfo(item){
    return `${item.Something} ${item.SomethingElse}`
  }
  
  render() {
  
  return (
   &lt;div className="someDiv"&gt;
      {
        collection.map(function (item) {
          return &lt;div&gt; {item.Name} {this.getItemInfo(item)} &lt;/div&gt;
      })
    }
   &lt;/div&gt;
  );
  
  }
  </code></pre>
  
  <p>No matter what I try I always end up getting "this.getItemInfo() is not a function".</p>
  
  <p>I did a <code>console.log</code> on <code>this</code> inside my <code>map()</code> function and it was infact refering to the Window object, but I can't seem to find a way to change that. </p>
  
  <p>I tired:</p>
  
  <ul>
  <li>defining <code>getItemInfo</code> as function getItemInfo(){..}</li>
  <li>passing <code>this</code> as a second parameter to my map function</li>
  <li>calling <code>this.getItemInfo = this.getItemInfo.bind(this)</code> in react's component constructor</li>
  <li>calling <code>.bind(this)</code> after <code>getItemInfo(item)</code></li>
  </ul>
  
  <p>And a couple other things....</p>
  
  <p>None worked. I am fairly new to JavaScript's <code>this</code> reference, and I cant seem to figure it out.</p>
  
  <p>I read some answers here related to using this inside <code>render()</code> but none of them seemed to work for me.</p>