CODEWITHSUNDEEP
javascriptreact-nativeaxiosreact-native-flatlistnative-base
Zain Khan
Zain Khan

Reputation: 1844

Render Array Objects into FlatList React Native

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>
        );
    }
}

Upvotes: 1

Views: 2861

Answers (2)

Charith Prasanna
Charith Prasanna

Reputation: 81

                    <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.

Upvotes: 1

SuleymanSah
SuleymanSah

Reputation: 17888

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

Upvotes: 2

Related Questions