CODEWITHSUNDEEP
javascriptreactjsreact-nativerenderreact-native-flatlist
Eleniko
Eleniko

Reputation: 96

renderItems problems in react-native FlatList

I am trying to deliver data from data.json to video.js

<Image source={{ uri: video.snippet.thumbnails.medium.url }} 
 style={{ height: 200 }} />

and i want to make this file renderd in flatlist

<FlatList 
  showsHorizontalScrollIndicator={false}
  data={data.items}
  keyExtractor={(item) => item.id}
  renderItem={(video) => <Video data={data.items}/>}
/>

when i try to render one item like data={data.items[0]} is shows up well, but it cant render some items the error says

Upvotes: 0

Views: 72

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

This might help

// Change your `renderItem` like    
renderItem={({item}) => <Video data={item}/>}

Video.js

const { data } = this.props;

return (
  <View style={styles.container}>
    <Image
      source={{ uri: data.snippet.thumbnails.medium.url }}
      style={{ height: 200 }}
    />
    ......
    <View style={styles.videoDetails}>
      <Text style={styles.videoTitle}>{data.snippet.title}</Text>
      <Text style={styles.videoStat}>
        {data.snippet.channelTitle} • {nFormatter(data.statistics.viewCount)} •{" "}
        {date(data.snippet.publishedAt)}
      </Text>
    </View>
    ......
  </View>
);

Upvotes: 1

Related Questions