title: Undefined is not an object on this.state object
body: <p>I am setting up a React Native App. In this App i am trying to include a reusable Top Navigation Component, which accepts an array of strings and then renders them appropriately. When i am trying to compare the array string to a given string, it throws the following error: </p>
  
  <p><strong>Unhandeld JS Exception: TypeError: undefined is not an object (evaluating 'this.state.choseTopNavigation'</strong></p>
  
  <p>Inserting a string to compare works just fine</p>
  
  <p>Setting up state object in constructor</p>
  
  <pre><code>import React, {Component} from 'react';
  import {Platform, StyleSheet, Text, View, ScrollView, FlatList} from 'react-native';
  import {Header, TopNavigationButton}  from './components';
  
  type Props = {};
  export default class App extends Component&lt;Props&gt; {
  
  
  constructor(props) {
    super(props);
    this.state = { 
      topNavigationOptions : [
        {key: 'Quick Search'},
        {key: 'Person Search'}],
        chosenTopNavigation: 
        "Quick Search",
    };
  
  }
  
  }
  
  
  
  renderItem({item}){
    if (item.key == this.state.chosenTopNavigation) {
      return (
          &lt;TopNavigationButton&gt;
            {item.key}
          &lt;/TopNavigationButton&gt;
        )
    } else {
      return (
        &lt;Text style = {styles.unchosenTextStyle}&gt;
          {item.key}
        &lt;/Text&gt;
      )
    }
  }
  
  
    render() {
      return (
        &lt;View&gt;
  
          &lt;Header&gt;Header&lt;/Header&gt;
          &lt;ScrollView horizontal = {true}&gt;
            &lt;View style = {styles.navigationContainer}&gt;
              &lt;TopNavigationButton&gt;Quick Search&lt;/TopNavigationButton&gt;
              &lt;Text style = {styles.unchosenTextStyle}&gt;Person Search&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/ScrollView&gt;
  
        &lt;FlatList 
          horizontal
          data={this.state.topNavigationOptions}
          renderItem = {this.renderItem}
        /&gt;
  
        &lt;/View&gt;  
      );
    }
  }
  </code></pre>
  
  <p>Note This Works</p>
  
  <pre><code>renderItem({item} ){
    if (item.key == "Quick Search") { //inserting a string directly works
      return (
          &lt;TopNavigationButton&gt;
            {item.key}
          &lt;/TopNavigationButton&gt;
        )
    } else {
      return (
        &lt;Text style = {styles.unchosenTextStyle}&gt;
          {item.key}
        &lt;/Text&gt;
      )
    }
  }
  </code></pre>
  
  <p>Thanks a lot for your help!</p>