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

Desctructure in function props with typescript

$
0
0

I'm trying to run a Flatlist with typescript, but it seems to allow only an expression function that has its props destructured. I cant seem to figure out how desctructure with the necessary type (Suggestion). Does anyone know how to fix this?

Unchanged flatlist function

  const renderSuggestions = () => <FlatList        data={data}        renderItem={renderItem}        onPress={(item:Suggestion) => handleSelect(item)}        keyExtractor={item => item.place_id}      />

Attempt 1 (error:renderItem overload not found)

 const renderItem = (item:Suggestion)=> (<View><TouchableOpacity ><Text >{item.structured_formatting.main_text}</Text></TouchableOpacity></View>  )

Attempt 2 (typescript type error (implicit any type))

const renderItem = ({item})=> (<View><TouchableOpacity ><Text >{item.structured_formatting.main_text}</Text></TouchableOpacity></View>  )

attempt per answer: item / index not found error

  const renderItem = (item:Suggestion, index:number)=> (<View><TouchableOpacity ><Text >{item.structured_formatting.main_text}</Text></TouchableOpacity></View>  )  const renderSuggestions = () => <FlatList        data={data}        renderItem={({ item:Suggestion, index:number }) => renderItem(item, index)}        onPress={(item:Suggestion) => handleSelect(item)}        keyExtractor={item => item.place_id}      />

Viewing all articles
Browse latest Browse all 6287

Trending Articles



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