How to display fetched data in react native

Question

I successfully posted data in MongoDB Atlas, Now i want to display that data in my simple react native App. Data is showing in my terminal but i am not able to display data in my App.

Here is code for Get data form the db.

display(){
  fetch('myUrl', {
  method: 'GET'
})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
     title: responseJson,
     description: responseJson
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

Here is the code that is not displaying the data in App

<TouchableOpacity onPress={()=>this.display()} style={styles.btn}>
  <Text style={{textAlign: 'center'}}> Display </Text>
</TouchableOpacity>

<View>
  <FlatList
    data={this.state.title}
    renderItem={({item}) => <Text>{item.title}</Text>}
    keyExtractor={({id}, index) => id}
    />
</View>

In responceJson I got all the posted data like title, description etc on my terminal. But when I add flat list for it is giving the error null is not an object (this.state.title) — Abdul Wahab
– Abdul Wahab, Commented Dec 9, 2019 at 7:53
can you alos share your console where you print this line console.log(responseJson); — harkesh kumar
– harkesh kumar, Commented Dec 9, 2019 at 7:54
Object { "__v": 0, "_id": "5dede264e74a14d7e284", "date": "2019-12-09T05:48:50.721Z", "description": "Bad", "title": "Monday", }, ] — Abdul Wahab
– Abdul Wahab, Commented Dec 9, 2019 at 7:59
I am getting the data but i am not able to display on screen properly that is the issue — Abdul Wahab
– Abdul Wahab, Commented Dec 9, 2019 at 8:00

SuleymanSah · Accepted Answer · 2019-12-09 11:09:04Z

1

Flatlist data property expects an array.

But you seem to set an object.

If your api returns an array you can make the following changes to make it work:

state = {
   items:[]
}

display() {
  fetch('myUrl', { method: 'GET'})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
        items: responseJson
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

As you see I used items in state as array, and updated its value when I got response from api.

And in flatlist:

<View>
  <FlatList
    data={this.state.items}
    renderItem={({item}) => <Text key={item._id}>{item.title}</Text>}
    keyExtractor={ item => item._id}
    />
</View>

A sample codesandbox

edited Dec 9, 2019 at 11:09

answered Dec 9, 2019 at 8:08

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Abdul Wahab Over a year ago

i got an error with this code > TypeError: null is not an object (evaluating 'this.state.items')

SuleymanSah Over a year ago

@AbdulWahab did you add this code to your component state = { items:[] }

SuleymanSah Over a year ago

@AbdulWahab does you api returns an array of objects?

Abdul Wahab Over a year ago

Yes, this object returning two item > title and description

SuleymanSah Over a year ago

@AbdulWahab is it like [{"title":"t1", description:"d1}, {"title":"t2", description:"d2} ] ?

|

Ravi Sharma · Accepted Answer · 2019-12-09 09:32:46Z

1

Update your code like this:

this.state = {
  responseData:[]
}
display = () => {
  fetch('myUrl', {
  method: 'GET'
})
 .then((response) => response.json())
 .then((responseJson) => {
   console.log(responseJson);
   this.setState({
     responseData: responseJson,
   })
 })
 .catch((error) => {
   console.error(error);
 });
}

inside your render function:

render(){
  const { responseData } = this.state;
  return(
    <TouchableOpacity onPress={()=>this.display} style={styles.btn}>
      <Text style={{textAlign: 'center'}}> Display </Text>
    </TouchableOpacity>

    <View>
      <FlatList
        data={responseData}
        renderItem={this.renderItem}
        keyExtractor={item => item.id}
        />
    </View> 
  );
}
renderItem = ({item}) => {
  const { title, id, description, date } = item;

  <View key={item.id}>
    <Text>{item.id}</Text>
    <Text>{item.title}</Text>
    <Text>{item.description}</Text>
    <Text>{item.date}</Text>
  </View>
}

answered Dec 9, 2019 at 9:32

Ravi Sharma

5371 gold badge7 silver badges25 bronze badges

4 Comments

Ravi Sharma Over a year ago

Hope it will help you @Abdul Wahab

Abdul Wahab Over a year ago

Tysm for your help. BTW It is throwing an err on this ** const { responseData } = this.state;** and the error is > TypeError: null is not an object (evaluating 'this.state.responseData')

Ravi Sharma Over a year ago

have you define` this.state = { responseData:[] }` or Can you share your code ?

Ravi Sharma Over a year ago

Please share your code , it will helpful for anyone to understand your issue.

harkesh kumar · Accepted Answer · 2019-12-09 08:07:34Z

0

try with return keywork
Working demo api

display(){

     return fetch('myUrl', {
      method: 'GET'
    })
     .then((response) => response.json())
     .then((responseJson) => {
       console.log(responseJson);
       this.setState({
         title: responseJson,
         description: responseJson
       })
     })
     .catch((error) => {
       console.error(error);
     });
    }

edited Dec 9, 2019 at 8:07

answered Dec 9, 2019 at 7:53

harkesh kumar

9032 gold badges14 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to display fetched data in react native

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related