How to pass props in the component to FlatList renderItem

This way is working for me

<FlatList
     numColumns={1}
     data={this.props.InvitedLeaguesList}
     renderItem={({ item }) => <League invitedLeague={item} onPress={this.props.onPress} />}
     extraData={this.props}
 />

enter image description here


you can pass props as a parameter to the function that render items of flat list as below:

<FlatList
     numColumns={1}
     data={this.props.InvitedLeaguesList}
     renderItem={(item) => this.renderLeague(item, this.props)}
/>

and you can use this parameter in the renderLeague function:

renderLeague({item}, props) {
   ...
}

that props variable include all parameter of props as you can use this.props in another place.


I think you try to make a callBack function, if so, please do the following.

renderLeague(item) {
    return <League invitedLeague={item} onPress={this._callBack.bind(this)} />;
}


//callback function
_callBack(data) {
   // your code here...
}

From your component League

call the function like the following,

this.props.onPress(datas);