FlatList renderItem problem with return value

I am new to react native and I do not know how it works yet but I want to return cosnt Card in renderItem.I want the flat list to return the data I retrieve via axios from API. API has data for two products that it wants to throw into const Card. The problem is that I do not know what to return in renderItem. At the bottom I put the code without style to better see what I mean. I think the problem is that const Card can't see the data retrieved by AXIOS.

code:

const HomeScreen = ({navigation}) => {

    const [data, setData] = useState([])

    useEffect(() => {
        axios.get('https://api.npoint.io/e3d714eb88eb75f37f29')
            .then(({ data }) => {
                console.log("defaultApp -> data", data.products)
                setData(data.products)
            })
            .catch((error) => console.error(error))
    }, []);

    const Card = () => {

        return (
            <TouchableOpacity activeOpacity={0.8}>
                <View style={style.card}>

                    <View style={{
                        flexDirection: "row",
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Text style={{fontWeight: "bold", fontSize: 17, marginTop: 5}}>
                            {item.description}
                        </Text>
                    </View>

                    <View style={{
                        flexDirection: "row",
                        marginTop: 5,
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>

                        <Text style={{
                            fontSize: 18,
                            fontWeight: 'bold',
                            color: COLORS.dark_red
                        }}>
                            {item.price}
                        </Text>
                    </View>

                </View>
            </TouchableOpacity>
        );
    }

    return (
        <SafeAreaView
            style={{
                flex: 1,
                paddingHorizontal: 20,
                backgroundColor: COLORS.back_color,
            }}>
            <FlatList
                      showsHorizontalScrollIndicator={false}
                      contentContainerStyle={{
                          marginTop: 10,
                          paddingBottom: 20
                      }}
                      data={data}
                      keyExtractor={({id}, index) => id}
                      renderItem={({item}) => {
                          return <Card product={item}/>; //here ?!?
                      }}
            />
        </SafeAreaView>
    );
};

export default HomeScreen;

Solution 1:

I think you need to pass props into the Card component. Try passing item in as a prop like this:

const Card = ({ item }) => {
  return (
    <TouchableOpacity activeOpacity={0.8}>
     ...
    </TouchableOpacity>
  );
};

Then pass in that item prop when you render the Card component from the FlatList.

<FlatList
  showsHorizontalScrollIndicator={false}
  contentContainerStyle={{
    marginTop: 10,
    paddingBottom: 20,
  }}
  data={data}
  keyExtractor={({ id }, index) => id}
  renderItem={({ item }) => {
    return <Card item={item} />; // changed this to take in item prop
  }}
/>;