reactjs - props not working inside normal javascript function .Cannot read property 'props' of undefined

Question

Here is my code.

var i = 0;

function myLoop() {
    let xhr1 = new XMLHttpRequest();
    xhr1.open('GET', data.data[0].sideList[i].sideSvg);
    xhr1.onload = () => {
        document.getElementById("configurator_side_" + i)
            .appendChild(xhr1.responseXML.documentElement);
        i++;
        this.props.dispatch(storeActions.setSideThumbSvg());
        if (i < data.data[0].sideList.length) {
            myLoop();
        }
    };
    xhr1.send();
}

myLoop();

I think "this" keyword is not accessible inside normal javascript. Please suggest .

question from:https://stackoverflow.com/questions/65852579/props-not-working-inside-normal-javascript-function-cannot-read-property-props

Answer 1

In your constructor bind that function to your current class , as below :

constructor( props ){
    super( props );
    this.myLoop = this.myLoop.bind(this);
}

function myLoop() {

    // self = this;
    let xhr1 = new XMLHttpRequest();
    xhr1.open('GET', data.data[0].sideList[i].sideSvg);
    xhr1.onload = () => {
        document.getElementById("configurator_side_" + i)
            .appendChild(xhr1.responseXML.documentElement);
        i++;
        this.props.dispatch(storeActions.setSideThumbSvg());
        if (i < data.data[0].sideList.length) {
            myLoop();
        }
    };
    xhr1.send();
}