How to access this.state from nested objects in react-native?

Question

I have a simple component like so:

import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class Statistics extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    }
  }

  componentDidMount() {

  }

  render() {
    var config = {
      chart: {
        events: {
          load: function() {
            console.log(this.state.data);
          }
        }
      }
    };

    return (null);
  }
}

How can I access the data array within the state inside load function?

Note

I don't want to bind the load().bind(this) function.

Thanks for the consideration.

Edit

This question is different, in that we're dealing with a scope that we're forced not to use this keyword at all. Please check my updated question above.

Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — jontro, Feb 06 '18 at 20:39

score 0 · Accepted Answer · answered Feb 06 '18 at 20:39

0

One approach: In the first line of your render function, you can save a reference to the state.

const state = this.state;

Then just reference component state using the constant state.

answered Feb 06 '18 at 20:39

Govind Rai

10,062
7
54
74

but then the state will always be the same. – Feb 06 '18 at 20:44
just use `const thisPtr = this` and reference `thisPtr.state` later on – jontro Feb 06 '18 at 20:46
@OOP no it wont. The state will be updated everytime the component re-renders. – Govind Rai Feb 06 '18 at 20:47

How to access this.state from nested objects in react-native?

Note

Edit

1 Answers1