CODEWITHSUNDEEP
reactjsreact-native
Alwaysblue
Alwaysblue

Reputation: 11950

Correct way of using FlatList

I was recently advised to use flat list instead of map

In Map, I was doing something like this in render (this works)

let CryptoData = this.props.cryptoLoaded;
let displaySearchCrypto = []
      displayCrypto = CryptoData.map(el => {
          return (<CoinCard
            no={i++}
            key={el["short"]}
            coinShortName = {el["short"]}
            coinName = {el["long"]}
            coinPrice = {el["price"].toFixed(2)}
            marketCap = {(el["mktcap"]/1000000000).toFixed(4)}
            percentChange = {el["perc"].toFixed(2)}
            vwapData={el["vwapData"].toFixed(2)}
            coinImage={"https://coincap.io/images/coins/" + el["long"] + ".png"}
            />
          )
        })
      }

Following the very minimal example for FlatList in the React Native Website, I did something like this in my return

   <FlatList
               data={this.props.cryptoLoaded}
               renderItem={({ el }) => (
               <CoinCard
                key={el["short"]}
                coinShortName = {el["short"]}
                coinName = {el["long"]}
                coinPrice = {el["price"].toFixed(2)}
                marketCap = {(el["mktcap"]/1000000000).toFixed(4)}
                percentChange = {el["perc"].toFixed(2)}
                vwapData={el["vwapData"].toFixed(2)}
                coinImage={"https://coincap.io/images/coins/" + el["long"] + ".png"}
                />
        )}
      />

But this is throwing an error saying that short is not defined. Can someone tell me what am I doing wrong here? How do we properly use FlatList?

Upvotes: 0

Views: 64

Answers (1)

Mateusz Kocz
Mateusz Kocz

Reputation: 4602

renderItem callback gets an object with the item property, so you need to change your destructuring to renderItem={({item}) => <Cmp prop={item["short"]}/>}.

Upvotes: 1

Related Questions