title: FlatList rendering empty childs
body: <p>I seem to have an issue rendering the childs in a FlatList. </p>
  
  <p>So, I'm creating a trading card deck building app. As a db I'm using a json file with around 1300 card objects.</p>
  
  <p>CardScreen:</p>
  
  <pre><code>export default class CardsScreen extends React.Component {
  
  constructor() {
      super();
  
      this.state = {
          cards: []
      }
  }
  
  componentDidMount() {
      this.setState({
          cards: cardsService.getCardsIds()
      });
  }
  
  render() {
      const {cards} = this.state;
  
      return (
          &lt;View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}&gt;
              &lt;View&gt;
                  &lt;Text&gt;Cards Screen&lt;/Text&gt;
                  &lt;Text&gt;Number of cards: {cards.length}&lt;/Text&gt;
              &lt;/View&gt;
              &lt;View&gt;
                  &lt;FlatList
                      data={cards}
                      renderItem={(id) =&gt; &lt;Text&gt;id={cards[id]}&lt;/Text&gt;}
                      keyExtractor={(id) =&gt; 'card-${id}'}
                  /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>During the componentDidMount, I retrieve all ids of each json object and create a simple array (state.cards). Normally I'd use a Card Component to render it out, but the list seemed empty, so I thought, as a test, to render the id's itself. </p>
  
  <p>I clearly see 1000+ texts "id=" being rendered, unfortunately without the id value.</p>
  
  <p>Not sure what I'm doing wrong here.</p>