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.

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 = `
            <table id="batters" name="batters" class="table table-bordered table-hover">
            <caption>List of batters</caption>
            <th>#</th>
            <th>Id</th>
            <th>Type</th>
            <tbody id="batters_body">`;    
        batters = res.batters.batter;
        for(var i = 0; i < batters.length; i++) {
            rowdata += `
                <tr>
                    <td>${[i + 1]}</td>
                    <td>${batters[i].id}</td>
                    <td>${batters[i].type}</td>
                </tr>`;
        }
        rowdata += `</tbody></table>`;
    }


    render() {
        return (
            <div>
                {rowdata}
            </div>
        );
    }
}

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.

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 = `
            <table id="batters" name="batters" class="table table-bordered table-hover">
            <caption>List of batters</caption>
            <th>#</th>
            <th>Id</th>
            <th>Type</th>
            <tbody id="batters_body">`;    
        batters = res.batters.batter;
        for(var i = 0; i < batters.length; i++) {
            rowdata += `
                <tr>
                    <td>${[i + 1]}</td>
                    <td>${batters[i].id}</td>
                    <td>${batters[i].type}</td>
                </tr>`;
        }
        rowdata += `</tbody></table>`;
    }


    render() {
        return (
            <div>
                {rowdata}
            </div>
        );
    }
}

• javascript
• reactjs
• typeerror

Share Follow asked May 11, 2018 at 3:59 Nakul NagariyaNakul Nagariya 10711 gold badge11 silver badge88 bronze badges 2

• 1 see stackoverflow./questions/50284049/… – Roy Wang Commented May 11, 2018 at 4:00
• 1 Possible duplicate of React 'this' undefined when adding table row – Randy Casburn Commented May 11, 2018 at 4:01

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Your problem is related to Context concept in JavaScript.

In JS functions have their Context and that means this keyword refer to the function itself.

You can use one of 2 following solutions:

One:

battersDataFetchReq() {
    let self = this;

    fetchFactory('./assets/some.json', 'GET')
        .then(function (data) {            
            self.showBattersData(data);    
        })
}

Tow (aka Arrow function): remended solution

battersDataFetchReq() {
    fetchFactory('./assets/some.json', 'GET')
        .then((data) => {
            this.showBattersData(data);
        })
}

Wondering why? From MDN:

An arrow function expression has a shorter syntax than a function expression and does not have its own this.

Continue reading ... (both links are from MDN)

• Arrow functions

• this

You need to .bind(this) your request callback or use an arrow function:

//ajax request
battersDataFetchReq() {
    fetchFactory('./assets/some.json', 'GET')
    .then((data) => { // Here, use a lambda or this will not point to your class
        this.showBattersData(data);
    })
}