'React Native Error - TypeError: undefined is not an object (evaluating 'item.key')

I am trying to use APIs from this website for my React Native App: https://api.spacexdata.com/v2/launches

I tried to follow the APIs from the JSON formatter closely, but receive the following error and do not know how to resolve it:

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

my code in App.js is as below..

 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 = () => {
     return fetch('https://api.spacexdata.com/v2/launches')
       .then(response => response.json())
       .then(responseJson => {
         this.setState({
           isLoading: false,
           dataSource: this.state.dataSource.concat(responseJson.array)
         });
       })
       .catch(error => console.log(error));   };   _keyExtractor = (datasource, index) => datasource.id;   componentDidMount() {
     this.getUserFromAPI();   }

   render() {
     if (this.state.isLoading) {
       return (
         <View style={styles.progress}>
           <ActivityIndicator size="large" color="#01CBC6" />
         </View>

       );
     }

     return (
       <FlatList
         data={this.state.dataSource}
         _keyExtractor={this._keyExtractor}
         renderItem={({ item }) => (
           <Card>
             <CardItem>
               <View style={styles.container}>
                 <Image style={styles.profilepic}
                   source={{
                     uri: item.links.mission_patch
                     // from API docs 
                   }}
                 />
               </View>
               <View style={styles.userinfo}>
                 <Text>
                   Flight Number: {item.flight_number} {", Mission Name: "} {item.mission_name}
                 </Text>
                 <Text>
                   Launch date (UTC): {item.mission_id.launch_date_utc}
                 </Text>
                 <Text>
                   {item.rocket.rocket_name}
                 </Text>
                 <Text>
                   Launch Site: {item.launch_site.site_name_long}
                 </Text>
                 <Text>
                   Details: {item.details}
                   Crew: {item.crew}
                 </Text>
               </View>
             </CardItem>
           </Card>
         )}
       />
     );   } }

My code for styling is as below: 

 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'   }

 });

Thanks very much.

api


Solution 1:[1]

You need to make two changes

  1. change _keyExtractor={this._keyExtractor} to keyExtractor={this._keyExtractor}
    1. in keyExtaractor function use flightNumber key instead of item.key like this _keyExtractor=(item)=>item.flightNumber;

Solution 2:[2]

I think you need to change the prop on the Flatlist component from _keyExtractor={this._keyExtractor} to keyExtractor={this._keyExtractor}

Solution 3:[3]

use this

use this
 keyExtractor={(item) => item.id.toString()} 
instead of  
 keyExtractor={item => item.id}

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Shahid ali
Solution 2 Nikhil Asrani
Solution 3 Sourabh Gera

Related Questions