Access State variable in highcharts event load function - react-native

Question

export class GraphComponent extends React.Component{
constructor(){
super();
this.state={data:[],data20:[]};
}
render(){
var Highcharts='Highcharts';
let self=this;
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
var series = this.series[0],i=0,j=1,k=0;
var p=self.state.data; // Access State variable here
}
}
}
series: [{
name: 'Random data',
data: this.state.data20 / Accessible Here
}]
}
return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
}
}
{"data":[{"x":154745486745,"y":0.5} // some 50-60 objects like this]}
I am getting this data from JSON/SERVER into state.data20(first 20) and state.data(rest of them). state.data20 are plotted. state.data is not Accessible in the Charts event load function. I have tried few methods but still failed.
With Self reference Image
Without Self reference Image

Answer 1

Try saving a reference do this on a variable. Check it out:
export class GraphComponent extends React.Component{
constructor(){
super();
this.state={data:[],data20:[]};
}
render(){
var Highcharts='Highcharts';
// Declare a variable to keep a reference to react context
let self = this;
var conf={
chart: {
type: 'spline',
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
var series = this.series[0],i=0,j=1,k=0;
var p = self.state.data; // Access State variable using self
}
}
}
}
return (<ChartView style={{height:300}} config={conf} options={options}></ChartView>);
}
}