Render Array Objects into FlatList React Native

Question

I' fetching data from axios through my API but when I'm rendering the data of it so it shows me blank template. So kindly let me know if I'm doing any mistake. I pasted my code with api response. Thanks

console.log => response.data

Data Array [
  Object {
    "ID": 2466,
    "ItemName": "WWE2K20"
}
]

My Component

import React, { Component } from 'react';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';
import { View, StyleSheet, FlatList, Image } from 'react-native';
import axios from 'axios';

export default class HomeScreen extends Component {
    constructor() {
        super()
        this.state = {
            itemList: []
        }
    }
    async componentDidMount() {
        await axios.get('myapiuri')
            .then((response) => {
                this.setState({
                    itemList: response.data
                });
                console.log("Data", this.state.itemList)
            })
            .catch(error=>console.log(error))
    }

    render() {
        return (
            <Container>
                <Content>
                    <FlatList
                        data={this.state.itemList}
                        renderItem={(item) => {
                            return(
                                <Text>{item.ItemName}</Text>
                            );
                        }}
                        keyExtractor={(item) => item.ID}
                    />
                </Content>
            </Container>
        );
    }
}

I think renderItem gets an object passed as parameters: renderItem={({item}) => { return( <Text>{item.ItemName}</Text> ); }} — Muhammed B. Aydemir
– Muhammed B. Aydemir, Commented Nov 7, 2019 at 7:08
Please debug using <Text>{JSON.stringify(item)}</Text> , If it doesnt show data then response may be empty or it might be in wrong format — Ajith
– Ajith, Commented Nov 7, 2019 at 7:41
Can you please share API url or try a static constant with data? Also please don't expect console.log("Data", this.state.itemList) to show state because setState is async function and next line can be executed even before actually setting state. — Pratik Purohit
– Pratik Purohit, Commented Nov 7, 2019 at 7:45

SuleymanSah · Accepted Answer · 2019-11-07 08:14:21Z

There are a few problems I see.

First you need to use ({item}) in renderItem as stated in comments.

Second, you are mixing async/await with then block. In this case there is no need to async/await.

So your code must be:

export default class HomeScreen extends Component {
  constructor() {
    super();
    this.state = {
      itemList: []
    };
  }

  componentDidMount() {
    axios
      .get("myapiuri")
      .then(response => {
        this.setState({
          itemList: response.data
        });
        console.log("Data", this.state.itemList);
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <Container>
        <Content>
          <FlatList
            data={this.state.itemList}
            renderItem={({ item }) => {
              return <Text>{item.ItemName}</Text>;
            }}
            keyExtractor={item => item.ID}
          />
        </Content>
      </Container>
    );
  }
}

If you still having problems, please look at this example:

https://snack.expo.io/@suleymansah/c0e4e5

Charith Prasanna · Accepted Answer · 2019-11-07 09:20:40Z

                    <FlatList
                        data={this.state.itemList}
                        renderItem={**(item)** => {
                            return(
                                <Text>{item.ItemName}</Text>
                            );
                        }}
                        keyExtractor={(item) => item.ID}
                      />

in here "item" is a object , it has , ID and ItemName. when you call like this item is not recognize as a object that is why nothing show ,

({ item })

you should change above call as this. then item recognize as a object and you can call its attributes as , item.Id or item.ItemName

i think you got my point why your code is not working. please learn react-native life cycle. componentDidMount didnt want async, after component render componentDidMount will call and componentWillMount call at one time when component loading.componentWillReceiveProps call when any state of the component change.

Collectives™ on Stack Overflow

Render Array Objects into FlatList React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related