Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6213

key extractor type in TypeScript FlatList

$
0
0

Previously, I was using a React Native FlatLis like this. Here datais obtained via a graphql query:

 return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text              style={styles.searchCancelResetText}              onPress={() => {                setUserData(null);                navigation.goBack();              }}>              Cancel</Text></View><View style={styles.listHolder}>            {data && (<FlatList                data={data.users.nodes}                horizontal={false}                scrollEnabled                renderItem={({ item }) => (<User                    user={item}                    originatorId={route.params.originatorId}                    //onSendRequest={onSendRequest}                  />                )}                keyExtractor={(item) => item.id.toString()}                ListEmptyComponent={NoFriendsContainer}              />            )}</View></View></View></SafeAreaView>  );

This worked fine and didn't give any errors. However, now I am trying to make a separate component FlatList which returns a FlatList only (under a View).

export const FlatList: React.FunctionComponent<UserProps> = ({  data,  originatorId,}) => {  return (<View><FlatList        data={data.users.nodes}        horizontal={false}        scrollEnabled        renderItem={({ item }) => (<User            user={item}            originatorId={originatorId}            //onSendRequest={onSendRequest}          />        )}        keyExtractor={(item) => item.id.toString()}        ListEmptyComponent={NoFriendsContainer}      /></View>  );};

I get errors on the horizontal property that:

Type '{ data: any; horizontal: boolean; scrollEnabled: true; renderItem: ({ item }: { item: any; }) => Element; keyExtractor: (item: any) => any; ListEmptyComponent: FunctionComponent<{}>; }' is not assignable to type 'IntrinsicAttributes & UserProps & { children?: ReactNode; }'.  Property 'horizontal' does not exist on type 'IntrinsicAttributes & UserProps & { children?: ReactNode; }'.ts(2322)

Similarly, I get an error on item from keyExtractor and renderItem that

Parameter 'item' implicitly has an 'any' type.

How can I fix this? I am using the code for the FlatList in both codes then why do I see an error in the second case and not the first one?


Viewing all articles
Browse latest Browse all 6213

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>