CODEWITHSUNDEEP
react-nativereact-native-flatlist
m9m9m
m9m9m

Reputation: 1721

How to pass multiple objects or values in FlatList extraData

I have a situation where I need to pass both State and Props in the FlatList extraData.

I tried something like this but didn't work.

 <FlatList
      numColumns={1}
      data={this.props.artists}
      renderItem={this.renderArtistItem}
      initialNumToRender={15}
      keyExtractor={item => item.id}
      extraData={(this.state, this.props.league)}
    />

How to do that?

Upvotes: 11

Views: 7999

Answers (4)

m9m9m
m9m9m

Reputation: 1721

You can try this: 

const extraData = {
      ...this.state,
      ...this.props
    };

<FlatList
 numColumns={1}
  data={this.props.artists}
  renderItem={this.renderArtistItem}
  initialNumToRender={15}
  keyExtractor={item => item.id}
  extraData={extraData}
/>

Upvotes: -1

Kushal Desai
Kushal Desai

Reputation: 127

You need to set state to extraData prop.

    <FlatList
       numColumns={1}
       data={this.props.artists}
       renderItem={this.renderArtistItem}
       initialNumToRender={15}
       keyExtractor={item => item.id}
       extraData={this.state}
    />

Upvotes: -1

virendrasingh bisht
virendrasingh bisht

Reputation: 146

try this:

<FlatList
  numColumns={1}
  data={this.props.artists}
  renderItem={this.renderArtistItem}
  initialNumToRender={15}
  keyExtractor={item => item.id}
  extraData={[this.state, this.props.league]}
/>

As it will work as an array in extra data.

Upvotes: 11

Jaydeep Galani
Jaydeep Galani

Reputation: 4961

try this,

<FlatList
  numColumns={1}
  data={this.props.artists}
  renderItem={this.renderArtistItem}
  initialNumToRender={15}
  keyExtractor={item => item.id}
  extraData={{state:this.state, props:this.props.league}}
/>

Upvotes: -1

Related Questions