CODEWITHSUNDEEP
jsonreact-native
John Doe
John Doe

Reputation: 185

Why can't I display my items in Flatlist?

I am currently trying to learn React-Native atm and I am having some trouble displaying out my items in my FlatList.

The below is my code

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class FetchExample extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
      dataSource: []
    }
}

  componentDidMount(){

    return fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
           .then((res) => res.json())
           .then((resJson) => {
           console.log('Here are the stuff', resJson.bpi)
           this.setState({
              isLoading: false,
              dataSource: resJson.bpi,
             })
           })
// catch any potential errors here
    .catch((error) =>{
      console.log(error)
    })
  }

  render(){
if(this.state.isLoading){
  return(
    <View style={{flex: 1, padding: 20}}>
      <ActivityIndicator />
    </View>
  );
}
return(
  <View style={{flex: 0.5, padding: 20}}>
    <Text>{console.log(this.state.dataSource)}</Text>
    <Text>Here's some testing text</Text>
    <Text>{console.log("This is in this.state.dataSource", this.state.dataSource)}</Text>
    {/* <FlatList 
      data= {this.state.dataSource}
      renderItem = {({item}) => <Text>{console.log(item)}</Text>} 
      /> */}
  </View>
)
  }
}

Whenever I uncomment the FlatList the simulator will shoot me an error saying "Invariant Violation: Tried to get frame for out of range index NaN"

What am I doing wrong? Atm I am just trying to see what's in item and get an understanding of how to work with Flatlist

Upvotes: 0

Views: 652

Answers (1)

chetan godiya
chetan godiya

Reputation: 316

here how i do it 

 <FlatList
          data={[this.state.dataSource]}
          renderItem={({ item }) => this._renderListItem(item)}
        />

and here the _renderListItem()

 _renderListItem(item){
    console.log(item)
      return(
        <View>
          <View style={{flexDirection:'row',width:'100%',backgroundColor:'red'}}>
          <Text>{item.USD.code}</Text>
          <Text>{item.USD.symbol}</Text>
          <Text>{item.USD.description}</Text>
          </View>
        </View>
        )
    }

and here is the expo link click here you get the idea and if any questions you have please ask me ...

Upvotes: 1

Related Questions