FlatList render item function does not let access passed parameters properties

Question

I am making an API call to a .NET Core API from a React Native App with Axios. On one screen I had the similar code that works perfectly but it does not work here and throws an error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'request.title')]
at node_modules\react-native\Libraries\Lists\FlatList.js:597:25 in renderer
at node_modules\react-native\Libraries\Lists\FlatList.js:629:25 in virtualizedListRenderKey
at node_modules\react-native\Libraries\Lists\VirtualizedList.js:2008:23 in CellRenderer#_renderElement
at node_modules\react-native\Libraries\Lists\VirtualizedList.js:2033:20 in CellRenderer#render
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:13725:21 in finishClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:13654:43 in updateClassComponent
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20692:22 in beginWork$1
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19855:22 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19783:21 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19753:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19445:33 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5975:29 in flushSyncCallbacks
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5954:22 in flushSyncCallbacksOnlyInLegacyMode
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19016:42 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11583:36 in dispatchAction
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:405:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:382:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

Here is the code that I wrote to implement a render function and the actual FlatList Component that is to call that method to render items:

const renderList = (request) => {
        return(
            <TouchableOpacity onPress={() => console.log(request.id + ", " + typeof(request.id))}>
                <View style={styles.container}>
                    <View style={styles.itemInfoContainer}>
                        <View>
                            <Text style={styles.title}>{request.title}</Text>
                        </View>
                        <View>
                            <Text style={styles.description}>{request.description}</Text>
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    return(
        <View style={{marginTop: 20}}>
            <FlatList 
                showsVerticalScrollIndicator={false}
                data={requests}
                keyExtractor={request => request.id}
                renderItem={({request}) => renderList(request)}            
            />
        </View>
    );

Answer 1

The renderItem function provides an object to its function. This object does not contain a property named request, hence the code

renderItem={({request}) => renderList(request)}

does not work. The property is called item. Each item is one element in the provided data array. In this case it is called requests.

You need to implement it as follows.

renderItem={({item}) => renderList(item)}