title: Cannot access State inside Function
body: <p>I am using <code>React Native</code> for my application, and at one point, I noticed that I have to type <code>this.state.bar[this.state.foo][SOME_NUMBER]</code> every time, within my components. </p>
  
  <p>This works perfectly fine, but I want to make my code cleaner by calling a function instead. So, I constructed this: </p>
  
  <pre><code>function txt(n){
      return this.state.bar[this.state.foo][n];
  }
  </code></pre>
  
  <p>However, when I run this in the <code>Expo</code> client, I get the following error: </p>
  
  <pre><code>TypeError: undefined is not an object (evaluating 'this.state.bar')
  
  This error is located at:
      in App...
      ....
  </code></pre>
  
  <p>Here is my entire code.</p>
  
  <pre><code>import React, 
      { Component } 
  from 'react';
  import { 
       ... 
  } from 'react-native';
  
  export default class App extends React.Component {
      state = {
          foo: 'ABC',
          bar: {
              'ABC': [
                  '...',
                  '...',
                  '...'
              ]
          }
      };
      render() {
          function txt(n){
              return this.state.bar[this.state.foo][n];
          }
          return (
              &lt;View&gt;
                  ...  
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>I tried placing the <code>text()</code> function outside the <code>App</code> class, but got the same error.</p>
  
  <p>When I placed it outside <code>render()</code> in <code>App</code>, I got an <code>unexpected token</code> error.</p>
  
  <p>When I defined <code>this.state</code> within a <code>constructor(props)</code> and placed <code>text()</code> within the <code>constructor</code>, I got <code>ReferenceError: Can't find variable: text</code> </p>