title: React Native Error - TypeError: undefined is not an object (evaluating 'item.key')
body: <p>I am trying to use APIs from this website for my React Native App: <a href="https://api.spacexdata.com/v2/launches" rel="nofollow noreferrer">https://api.spacexdata.com/v2/launches</a></p>
  
  <p>I tried to follow the APIs from the JSON formatter closely, but receive the following error and do not know how to resolve it:</p>
  
  <pre><code>TypeError: undefined is not an object (evaluating 'item.key')
  
  This error is located at:
      in VirtualizedList (at FlatList.js:676)
      in FlatList (at App.js:42)
      in App
      in ExpoRoot (at renderApplication.js:40)
      in RCTView (at AppContainer.js:101)
      in DevAppContainer (at AppContainer.js:115)
      in RCTView (at AppContainer.js:119)
      in AppContainer (at renderApplication.js:39)
  
  defaultProps.keyExtractor
      VirtualizedList.js:467:15
  _pushCells
      VirtualizedList.js:761:31
  _pushCells
      VirtualizedList.js:759:13
  render
      VirtualizedList.js:871:8
  renderRoot
      [native code]:0
  runRootCallback
      [native code]:0
  Component.prototype.setState
      react.development.js:325:31
  tryCallOne
      core.js:37:14
  setImmediate$argument_0
      core.js:123:25
  callImmediates
      [native code]:0
  flushedQueue
      [native code]:0
  invokeCallbackAndReturnFlushedQueue
      [native code]:0
  </code></pre>
  
  <p>my code in App.js is as below..</p>
  
  <pre><code> import React from 'react'; import { ActivityIndicator, FlatList,
   Image, StyleSheet, Text, View } from 'react-native'; import { Card,
   CardItem, Item } from 'native-base'
  
   export default class App extends React.Component {
  
     constructor(propos) {
       super(propos);
       this.state = {
         isLoading: true,
         dataSource: []
       };   }
  
     getUserFromAPI = () =&gt; {
       return fetch('https://api.spacexdata.com/v2/launches')
         .then(response =&gt; response.json())
         .then(responseJson =&gt; {
           this.setState({
             isLoading: false,
             dataSource: this.state.dataSource.concat(responseJson.array)
           });
         })
         .catch(error =&gt; console.log(error));   };   _keyExtractor = (datasource, index) =&gt; datasource.id;   componentDidMount() {
       this.getUserFromAPI();   }
  
     render() {
       if (this.state.isLoading) {
         return (
           &lt;View style={styles.progress}&gt;
             &lt;ActivityIndicator size="large" color="#01CBC6" /&gt;
           &lt;/View&gt;
  
         );
       }
  
       return (
         &lt;FlatList
           data={this.state.dataSource}
           _keyExtractor={this._keyExtractor}
           renderItem={({ item }) =&gt; (
             &lt;Card&gt;
               &lt;CardItem&gt;
                 &lt;View style={styles.container}&gt;
                   &lt;Image style={styles.profilepic}
                     source={{
                       uri: item.links.mission_patch
                       // from API docs 
                     }}
                   /&gt;
                 &lt;/View&gt;
                 &lt;View style={styles.userinfo}&gt;
                   &lt;Text&gt;
                     Flight Number: {item.flight_number} {", Mission Name: "} {item.mission_name}
                   &lt;/Text&gt;
                   &lt;Text&gt;
                     Launch date (UTC): {item.mission_id.launch_date_utc}
                   &lt;/Text&gt;
                   &lt;Text&gt;
                     {item.rocket.rocket_name}
                   &lt;/Text&gt;
                   &lt;Text&gt;
                     Launch Site: {item.launch_site.site_name_long}
                   &lt;/Text&gt;
                   &lt;Text&gt;
                     Details: {item.details}
                     Crew: {item.crew}
                   &lt;/Text&gt;
                 &lt;/View&gt;
               &lt;/CardItem&gt;
             &lt;/Card&gt;
           )}
         /&gt;
       );   } }
  </code></pre>
  
  <p>My code for styling is as below: </p>
  
  <pre><code> const styles = StyleSheet.create({   container: {
       flex: 1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center'   },   profilepic: {
       flex: 2,
       height: 100,
       width: 100   },   userinfo: {
       flex: 5,
       flexDirection: 'column',
       marginStart: 50   },   progress: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center'   }
  
   });
  </code></pre>
  
  <p>Thanks very much.</p>