Fetch data from API using React Native

Question

I'm trying to fetch data from the url below, but when I launch the code it returns the error: TypeError: undefined is not an object (evaluating 'res.data.hints'), and consequentially nothing happens, I've followed various tutorials and they seem to come up with this code.

States

constructor(props) {
    super(props);
    this.updateSearch();
    this.state = {
      data: [],
    };
  }

Function

 updateSearch = () => {
        const url = `https://api.edamam.com/api/food-database/v2/parser?ingr=b&app_id=000&app_key=00000&page=20`;
        fetch(url)
           .then((res) => res.json())
           .then((res) => {
             this.setState({
               data: res.data.hints
             });
           })
           .catch(error => {
            console.log("error : "+ error)
          });
      };

Flatlist

     <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem>
              <TouchableOpacity>
                <View>
                  <Text>{item.label}</Text>
                  <Text>{item.brand}</Text>
                </View>
              </TouchableOpacity>
            </ListItem>
          )}
          keyExtractor={(item) => item.foodId}
        />

Adnan Samir · Accepted Answer · 2021-07-18 11:55:22Z

3

this.setState({
           data: res.hints
         });

Try this

answered Jul 18, 2021 at 11:55

Adnan Samir

1715 bronze badges

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

5 Comments

Salvo Over a year ago

It now shows only the lines of the separator of the Flatlist, no labels appear in the Flatlist and also it returns the Warning: ` Each child in a list should have a unique "key" prop.`

Adnan Samir Over a year ago

To remove the warning you will have to provide the a key props to the parent component where you are mapping the fetched data

Salvo Over a year ago

I'm generally new to programming, how can I do that?

Adnan Samir Over a year ago

<ListItem key={item.food.foodId}>, and also to render the items on screen you will have to use the following code : <FlatList data={this.state.data} renderItem={({ item }) => ( <ListItem key={item.food.foodId}> <TouchableOpacity> <View> <Text>{item.food.label}</Text> <Text>{item.food.brand}</Text> </View> </TouchableOpacity> </ListItem> )} keyExtractor={(item) => item.food.foodId} />

Chukwujiobi Canon Over a year ago

Hi welcome to Stack Overflow. Please consider giving a reason why this works.

Collectives™ on Stack Overflow

Fetch data from API using React Native

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related