title: React Js Uncaught (in promise) TypeError: Cannot read property of undefined
body: <p>I am learning to react, facing this issue while making the ajax request, even I'm getting the response but not able pass that response to other function { this.showBattersData(data); } where I can render the dom. this is pretty obvious that I'm missing something here. any help will be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react'
  import { fetchFactory } from '../Fetch/fetchFactory'
      
      var batters = [];
      var rowdata = "";
  
      
  export class Body extends React.Component {
      constructor(props) {
          super(props);
          this.battersDataFetchReq = this.battersDataFetchReq.bind(this);
          this.showBattersData = this.showBattersData.bind(this);
          this.battersDataFetchReq();
      }    
  
      //ajax request
      battersDataFetchReq() {
          fetchFactory('./assets/some.json', 'GET')
          .then(function(data) {
              //this.showBattersData = this.showBattersData.bind(this);
              this.showBattersData(data); // this is where i'm getting this error
  
          })
      }
  
      showBattersData(res) {
          console.log("inside showBattersData:: ", res);
          rowdata = `
              &lt;table id="batters" name="batters" class="table table-bordered table-hover"&gt;
              &lt;caption&gt;List of batters&lt;/caption&gt;
              &lt;th&gt;#&lt;/th&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;tbody id="batters_body"&gt;`;    
          batters = res.batters.batter;
          for(var i = 0; i &lt; batters.length; i++) {
              rowdata += `
                  &lt;tr&gt;
                      &lt;td&gt;${[i + 1]}&lt;/td&gt;
                      &lt;td&gt;${batters[i].id}&lt;/td&gt;
                      &lt;td&gt;${batters[i].type}&lt;/td&gt;
                  &lt;/tr&gt;`;
          }
          rowdata += `&lt;/tbody&gt;&lt;/table&gt;`;
      }
  
  
      render() {
          return (
              &lt;div&gt;
                  {rowdata}
              &lt;/div&gt;
          );
      }
  }</code></pre>
  </div>
  </div>
  </p>