React Native: Basic FlatList to render API content

Question

I am trying to render data from an API using a FlatList.

I can't get anywhere. I have a lot of trouble filling in the DATA and renderItem fields.

Could you help me ?

Thank you :)

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

export default class Results extends React.Component {
  constructor(props) {
    super(props);
    //console.log('state',this.props)
    this.state = {
      city: "Montpellier", //this.props.city,
      report: null, // Données de l'API
    };
    this.fetchWeather();
  }

  fetchWeather() {
    axios
      .get(
        "https://api.openweathermap.org/data/2.5/weather?q=" +
          this.state.city +
          "&appid=9fce19ee0d267aa48afdf331bb1668da",
      )
      .then((response) => {
        this.setState({ report: response.data });
        //console.log(response.data)
      });
  }

  render() {
    const DATA = this.state.report;

    if (this.state.report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList data={DATA} renderItem={<Text> {this.state.report.id} </Text>} keyExtractor={(item) => item.id} />
      );
    }
  }
}

renderItem should be a function. It will have each item that is present in the data array. see reactnative.dev/docs/flatlist.html. You will be able to use {item.id} — Kenny John Jacob
– Kenny John Jacob, Commented Aug 25, 2020 at 12:40
Thanks @KennyJohnJacob ! I am trying to solve it by putting renderItem as a function, but it don't works. I am en beginner, and i saw the flatlist doc. Can you help me please :) ? — Gaël Reliquet
– Gaël Reliquet, Commented Aug 25, 2020 at 12:56

Muhammed Anees · Accepted Answer · 2020-08-25 13:01:48Z

1

renderItem prop basically passes each item in your data to the function provided so that you can render them accordingly in the list. Changing you flatlist like this should work.

render() {
    const {report} = this.state;

    if (report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList 
          data={report} 
          renderItem={(reportItem) => <Text> {reportItem.id} </Text>} 
          keyExtractor={(item) => item.id} />
      );
    }
  }

answered Aug 25, 2020 at 13:01

Muhammed Anees

1,8601 gold badge16 silver badges17 bronze badges

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

Comments

Mulweli Mushiana · Accepted Answer · 2020-08-25 13:07:49Z

1

There are two mistakes in your Flatlist.

renderItem must be a function that returns all your JSX code
Since you already provided the Flatlist with data, you don't need to refer to this.state.report.id again, you can simply replace it with {item.id}.

So your Flatlist should look like this:

<FlatList
  data={DATA}
  keyExtractor={(item) => item.id}
  renderItem={(item) => {
   return (
     <Text> {item.id} </Text>)
     }}
 </FlatList>

answered Aug 25, 2020 at 13:07

Mulweli Mushiana

3712 silver badges14 bronze badges

Comments

Kenny John Jacob · Accepted Answer · 2020-08-25 13:05:00Z

0

So the idea is that the FlatList will take in an array (<FlatList data={DATA} ...) and will automatically go through the items one by one. But it does not know how to render the actual UI for each item. For that we are giving a function which will transform each item into a UI element. This is the function that we are missing.

So

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

export default class Results extends React.Component {
.
.
.

  render() {
    const DATA = this.state.report;

    if (this.state.report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList data={DATA} renderItem={function (item) {
          return <Text> {item.id} </Text>
        }} keyExtractor={(item) => item.id} />
      );
    }
  }
}

As per the documentation, what they mean is that this function will be called and each item will be passed into it. The item shape will be of the same shape as DATA[0] (essentially any object in that array).

In the docs, they have this snippet,

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

This essentially means that each object in the array is of shape

{
  title: "some title"
}

That is called object destructuring, and it is easy to understand if you google for it :)

answered Aug 25, 2020 at 13:05

Kenny John Jacob

1,2189 silver badges22 bronze badges

6 Comments

Gaël Reliquet Over a year ago

Thank you very much for your help Kenny. I tried your solution but I have the error in my device : "Invariant Violation: Tried to get frame for out of range index NaN" Do you have an idea to how to solve it ? Thanks :)

Kenny John Jacob Over a year ago

could you check the data in DATA is an array or not?

Gaël Reliquet Over a year ago

No I don't think that DATA is an array. DATA refers to information there : api.openweathermap.org/data/2.5/…

Kenny John Jacob Over a year ago

Oh, then you don't need to use something like a FlatList. You can just use a normal <Text> tag and use the data within that :)

Gaël Reliquet Over a year ago

Yes i finally find my data, it is in an array called "weather". Should I use a FlatList ?

|

Collectives™ on Stack Overflow

React Native: Basic FlatList to render API content

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related