How to return a context in this case?

Good day! I can not understand how it is possible in this case to return the context. The sample code below!
class App extends Component {

 constructor(props) {
super(props);
 this.context = new (window.AudioContext || window.webkitAudioContext)();
}

 play = () => {
 this.source = context.createBufferSource();
 this.source.buffer = this.buffer;
 this.destination = context.destination;
this.source.connect(this.destination);
this.source.start(0);
};

 stop = () => {
this.source.stop(0);
};


 loadSoundFile = (url) => {
 let xhr = new XMLHttpRequest();
 xhr.open('GET', url, true);
 xhr.responseType = 'arraybuffer'; // important
 xhr.onload = function(e) {
this.context.decodeAudioData(this.response
 function(decodedArrayBuffer) {
 this.buffer = decodedArrayBuffer;
 }, function(e) {
 console.log('Error decoding file', e);
});
};
xhr.send();
};

 componentDidMount() {
this.loadSoundFile('audio/i_see_you.mp3');
}

 render() {
 return (
the <div>
 <audio controls>
 <source src="audio/i_see_you.mp3">
</audio>
</div>
);
}
}

In function loadSoundFile when we make an AJAX request I need to use this (in particular this.context and this.buffer). But the context in this piece of code is lost. With the return of context is not yet completely understood, so asking for help from knowledgeable people!!! If possible with a little explanation)
June 14th 19 at 20:45
1 answer
June 14th 19 at 20:47
Solution
1 option is to use arrow functions:

method(function() {
...
});

// replace with 
method(() => {
...
})


Option 2 - bind the context to a variable:

const that = this;
that.context;


Read this
Thank you! Dial f-s really helped not to lose the context) - Mack_Kris commented on June 14th 19 at 20:50
I hope you have learned what is function pointer and where the context and not just used them) - Sydney.Durg commented on June 14th 19 at 20:53

Find more questions by tags JavaScriptReact