How do I pass a key through a FlatList into its renderItem?

Viewed 814

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?

1 Answers

Figured it out, that was silly. I think this was the result of the keyExtractor, but I could still pass the key in separately like...

renderItem({item}) {
    return (
        <Item
            _key={item.key}
            {...item}
        />
    )
}
Related