Question 243850 in React native Question posted in
The official React Native documentation can be found here.

react native Flatlist not rendering and my code is clean

i am writing perfect code but its not rendering

import axios from "axios";
import React, { useEffect, useState } from "react";
import { View,  StyleSheet, ScrollView, FlatList } from "react-native";
import AppCard from "../components/AppCard";
import { Avatar, Button, Card, Text } from "react-native-paper";

function Home() {
  const [data, setData] = useState();
  useEffect(() => {
    async function fetchData() {
      try {
        const data = await axios.get("https://fakestoreapi.com/products");
        setData(data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <Card>
            <Card.Cover source={{ uri: item.image }} />
            <Card.Content style={{ margin: 19 }}>
              <Text variant="titleLarge">{item.title}</Text>
            </Card.Content>
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Home;

i wrote a clean code but its not working at all

llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll

Tags:

2

Answers


  1. 0

    try this one

    import React, { useEffect, useState } from "react";
import { View, Image, StyleSheet,Text, ScrollView, FlatList, Alert } from "react-native";


function Home() {
  const [data, setData] = useState([]);
  useEffect(() => {
    async function fetchData() {
      try {
        fetch("https://fakestoreapi.com/products",{
          method:"GET"
        }).then((data) => data.json()).then((data) => {
          setData(data)
        }).catch((err) => {
          console.log(err);
          Alert.alert("ERROR", JSON.stringify(err)
          )
        })
       
      } catch (error) {
        Alert.alert("ERROR", JSON.stringify(error))
      }
    }
    fetchData();
  }, []);

  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={{margin:20, backgroundColor:"red"}}>
            <Image source={{ uri: item.image }} />
            <View style={{ margin: 19 }}>
              <Text variant="titleLarge">{item.title}</Text>
            </View>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Home;
    Login or Signup to reply.
  2. 0

    In your useEffect, you are setting the fetched data directly to the data state variable. However, you should set the actual data from the API response, which is typically found in the data property of the response object. To fix this, you should change setData(data) to setData(data.data):

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search