title: Reading array from render function by state management in react native
body: <p>I am trying to render array of data in form of card. However only one item will be render as single card at a time. Once user update card number, next item will be rendered. 
  I am not able to call array item wise in render function. </p>
  
  <p>map function for list doesn't work for me as it will populate whole array but I want user to input before next item.</p>
  
  <p>This data is saved from API call</p>
  
  <pre><code>data = [
    { id: 1, text: 'Card #1', uri: 'https://images.unsplash.com/photo-1535591273668-578e31182c4f?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=f28261f0564880c9086a57ee87a68887&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60' },
    { id: 2, text: 'Card #2', uri: 'https://images.unsplash.com/photo-1535576434247-e0f50b766399?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=232f6dbab45b3f3a6f97e638c27fded2&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60' },
    { id: 3, text: 'Card #3', uri: 'https://images.unsplash.com/photo-1535565454739-863432ea3c0e?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=7edfb9bc7d214dbf2c920723cb0ffce2&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60' },
  ];
  </code></pre>
  
  <p>This is array of Data. Now from render function:</p>
  
  <pre><code>renderCard() {
      const buttons = ['Call', 'Fold', 'Raise']
      const selectedIndex = this.state.selectedIndex
      return (
        &lt;Card
          title="Profiling Question "
          image={{ uri: this.state.data[selectedIndex].uri }}
        &gt;
          &lt;Text style={{ marginBottom: 10 }}&gt;
            {this.state.data[selectedIndex].text}
          &lt;/Text&gt;
          &lt;Button
            onPress={this.updateIndex}
          /&gt;
        &lt;/Card&gt;
      );
    }
  </code></pre>
  
  <p>UpdateIndex function updates index value. This is working fine. </p>
  
  <p>I expect single card to be rendered with button to update to next card. </p>
  
  <p><strong>However I am getting this error:</strong></p>
  
  <p><code>TypeError: undefined is not an object(evaluting'this.state.data[selectedIndex].uri')</code></p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I have tried removing index too to check as below:</p>
  
  <pre><code>return (
        &lt;Card
          title={"Question No: "+ this.state.selectedIndex +1 }
          image={{ uri: this.state.data[0].question_image }}
        &gt;
          &lt;Text style={{ marginBottom: 10 }}&gt;
            {this.state.data[0].question_text}
          &lt;/Text&gt;
          &lt;Button
            onPress={this.updateLn}&gt;
            &lt;Text&gt; Update Question &lt;/Text&gt;
          &lt;/Button&gt;
        &lt;/Card&gt;
      );
  </code></pre>
  
  <p>Still same error.</p>
  
  <p>My state is as:</p>
  
  <pre><code>export default class QuizScreen extends Component {
    constructor(props) {
      super(props)
      this.state = {
        data: [],
        selectedIndex: 0,
        dataLength: 0,
        cardIndex: 0,
      };
      this.updateIndex = this.updateIndex.bind(this)
      this.updateLn = this.updateLn.bind(this)
    }```
  
  </code></pre>