iam trying to get some date from firebase using react naitve but iam having some problems , iam using useState to pass the array of objects in my firebase to an array in my code but the useState dont pass the array from firebase and i dont know why this is the handleFunction of getingProducts
const [products, setProducts] = useState([]);
const getProductHandle = async () => {
const arr = await getProducts();
setProducts(arr);
console.log(arr);
console.log(products);
};
useEffect(async() => {
await getProductHandle();
}, []);
and this is the FlatList iam using to show my products
<FlatList
data={products}
// numColumns={2}
renderItem={(itemData) => {
<productCard
productName={itemData.item.productName}
price={itemData.item.price}
details={itemData.item.details}
type={itemData.item.type}
image={itemData.item.image}
/>;
}}
/>
and this is the productCard
const productCard = ({ productName, price, image, details, type }) => {
return (
<View style={{height:300, width:300 , borderWidth:1}}>
<Image style={{ width: 100, height: 100 }} source={image} />
<Text>
{productName} {price} {details} {type}
</Text>
</View>
);
};
export default productCard;
after running the code it doesnt give me any errors and i tried to console.log the array from my firebase it return with the products in the firebase , but the products array in my useState have zero elements and i dont know how to solve this problem
Your renderItem function does not return anything. Thus, the productCard won't be rendered.
Fix it as follows.
<FlatList
data={products}
// numColumns={2}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
return <productCard
productName={item.productName}
price={item.price}
details={item.details}
type={item.type}
image={item.image}
/>;
}}
/>
You can not pass anonymous async callback to useEffect and you don't even need it, just call the function like this.
useEffect(() => {
getProductHandle();
}, []);Plus you should check state value outside the async function because new value will be available after component re-render and not in the async function instantly.
Maybe these codes can solve it.
<FlatList
data={products}
// numColumns={2}
renderItem={(itemData) => ( <productCard
productName={itemData.item.productName}
price={itemData.item.price}
details={itemData.item.details}
type={itemData.item.type}
image={itemData.item.image}
/>;
)}
/>
The difference is that before <productCardyou have to write with parentheses or if you wanna with curly brackets, you must be write return