Data not being displayed in one of two FlatLists in the same component - react-native

Question

I have a component with two TextInputs. Under each TextInput, there is a FlatList which gets rendered when the user types in some characters (the actual rendering happens in ListItem, a module from react-native elements). For the first FlatList, everything works fine - it is rendered as expected. The problem is with the second FlatList - I cannot get it to render. See this gif to understand what I mean: https://gph.is/g/E1G1jnx
I've tried using the "extraData" prop as advised in One of two FlatLists not rendering items in same component , but it didn't fix the issue.
I know that the problem doesn not come from onChangeAddress(address) being an async function. I used a static dataset and still it wouldn't render.
import { StyleSheet, Text, TextInput, View, FlatList, ImageBackground, Image } from 'react-native';
import { ListItem, Button } from 'react-native-elements';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
jobInputValue: '',
addressInputValue: '',
showJobsDropdown: false,
showAddressesDropdown: false,
jobsList: this.props.jobTitles.results,
addressPredictions: []
};
}
async onChangeAddress(address) {
//fetch the data from the API
//filteredAddresses stores the data from the API
if (filteredAddresses.length > 0) {
this.setState({
addressPredictions: filteredAddresses,
showAddressesDropdown: true
})
}
}
}
render() {
return (
<ImageBackground style={styles.bkgImage} source={require('../assets/homepage_background.jpg')}>
<TextInput
style={styles.jobTextInput}
value={this.state.jobInputValue}
placeholder='Ce job cauți?'
onChangeText={(jobInputValue) => this.setState({jobInputValue}, this.checkJobsDropdown(jobInputValue))}/>
<FlatList
data={this.state.jobsList}
style={this.state.showJobsDropdown ? styles.jobsDropdownStyle : styles.dropdownHiddenStyle}
renderItem={({ item }) => (
<ListItem
title={item}
containerStyle={{paddingBottom: -4}}
titleProps={{ style: styles.dropdownItemStyle}}
onPress={() => this.setState({jobInputValue: item}, this.hideJobsDropdown())}
/>
)}
keyExtractor={item => item}
/>
<TextInput
style={styles.addressTextInput}
value={this.state.addressInputValue}
placeholder='La ce adresă locuiești?'
onChangeText={addressInputValue => this.onChangeAddress(addressInputValue)}
/>
//the issue is with the FlatList below
<FlatList
data={this.state.addressPredictions}
extraData={this.state}
style={this.state.showAddressesDropdown ? styles.addressDropdownStyle : styles.dropdownHiddenStyle}
renderItem={({ addressItem, index }) => (
<ListItem
title={addressItem}
containerStyle={{paddingBottom: -4}}
titleProps={{style: styles.dropdownItemStyle}}
onPress={() => this.setState({addressInputValue: addressItem}, this.hideAddressesDropdown())}
/>
)}
keyExtractor={(addressItem, index) => index.toString()}
/>
<Button
title="CAUTĂ"
type="outline"
underlayColor={colors.red}
titleStyle={styles.buttonTitleStyle}
color={colors.red}
style={styles.buttonStyle}
onPress={this.printState}
/>
</ImageBackground>
);
}
Any help will be greatly appreciated!

Answer 1

The problem is in the destructuring of the data for rendering the items of your second flatlist:
renderItem={({ addressItem, index }) => (
<ListItem
title={addressItem}
containerStyle={{paddingBottom: -4}}
titleProps={{style: styles.dropdownItemStyle}}
onPress={() => this.setState({addressInputValue: addressItem}, this.hideAddressesDropdown())}
/>
)}
({ addressItem, index }) <- there's no addressItem available here. You have to replace that with item, as Flatlist offers an object with the { item: Object, index: Number, separators: object } structure as the param to your renderList callback.