I have a feed screen on my react native app that has a list component:
<List
refreshControl={
<RefreshControl
tintColor={'#E4E4E4'}
refreshing={this.state.loading}
onRefresh={this._onRefresh}
/>
}
onPressFooter={this.onEndReached}
data={this.state.posts}
/>
...which imports from List.js which is a FlatList component:
class List extends React.Component {
renderItem = ({ item }) => <Item {...item} />;
keyExtractor = item => item.key;
render() {
const { ...props } = this.props;
return (
<FlatList
ref={(ref) => { this.listRef = ref; }}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
ListFooterComponent={footerProps => (
<Footer {...props} />
)}
showsVerticalScrollIndicator={false}
{...props}
/>
);
}
Inside this.props in List.js, I have access to this.props.key which is the key for a row in my Firebase database, but I don't have access to that key inside renderItem. in Item.js, I only have access to the data stored in that row, not the rows unique key.
How do I get access to that key inside Item.js? I think I'm just passing the values through incorrectly?