JSX element doesn't render inside a loop - reactjs

Question

I have an array of stock data for my shopping store which I would like to render in the screen with the help of a for loop. But only the first item in the array is being rendered, while the array have 9 items.
I also have tried putting the render function outside the functional component, still the same issue.
Plz help me to identify the problem. Thanks.
code
const Home = () => {
const [isSneakersActive, setIsSneakersActive] = React.useState(false);
const [isWatchActive, setIsWatchActive] = React.useState(false);
const [isBackpackActive, setIsBackpackActive] = React.useState(false);
const screenWidth = Dimensions.get('window').width;
const renderProducts = () => {
for (let i = 0; i < Products.length; i++) {
const element = Products[i];
return (
<ProductCard>
<ProductHeader>
{element.discount === 'none' ? (
<DiscountLabel style={{backgroundColor: '#fff'}} />
) : (
<DiscountLabel>
<Text size={13} weight="bold">
{element.discount}
</Text>
</DiscountLabel>
)}
{element.favourite === 'yes' ? (
<Ionicons name="heart-circle" color="#F75058" size={20} />
) : (
<AntDesign name="heart" color="#B6B8C7" size={15} />
)}
</ProductHeader>
<ProductPicture>
<View style={ProductPictureStyles.border}>
<View style={ProductPictureStyles.circle}>
<Image
source={element.imageSrc}
style={[
ProductPictureStyles.image,
{
height: (screenWidth / 1731) * 433,
},
]}
/>
</View>
</View>
</ProductPicture>
<ProductName>
<Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold">
{element.name}
</Text>
</ProductName>
<ProductPrice>
<Text color="#3D44AA" size={(screenWidth / 380) * 18} weight="bold">
{element.price}
</Text>
</ProductPrice>
<ProductRating>
<AntDesign name="star" color="#fdd344" size={18} />
<AntDesign name="star" color="#fdd344" size={18} />
<AntDesign name="star" color="#fdd344" size={18} />
<AntDesign name="star" color="#fdd344" size={18} />
<AntDesign name="staro" color="#f0e8c9" size={18} />
</ProductRating>
</ProductCard>
);
}
};
return (
<View style={{flex: 1}}>
<Section5 style={{paddingHorizontal: 0}}>
<ScrollView showsVerticalScrollIndicator={false}>
{isSneakersActive ? (
<Section5 style={{paddingHorizontal: 0}}></Section5>
) : isWatchActive ? (
<Section5 style={{paddingHorizontal: 0}}></Section5>
) : isBackpackActive ? (
<Section5 style={{paddingHorizontal: 0}}></Section5>
) : (
<Section5 style={{paddingHorizontal: 0}}>
{renderProducts()}
</Section5>
)}
</ScrollView>
</Section5>
</View>
);
};
export default Home;
stock data
export const Products = [
{
id: 1,
category: 'shoe',
name: 'Air Max Motion',
imageSrc: require('../images/sneekers.png'),
price: '$ 250',
rating: 5,
discount: '8%',
favourite: 'yes',
},
{
id: 2,
category: 'backpack',
name: 'Hiking Starlet',
imageSrc: require('../images/backpack.png'),
price: '$ 350',
rating: 5,
discount: '5%',
favourite: 'yes',
},
{
id: 3,
category: 'backpack',
name: 'Hand Bag',
imageSrc: require('../images/backpack02.png'),
price: '$ 80',
rating: 3.5,
discount: '8%',
favourite: 'no',
},
{
id: 4,
category: 'shoe',
name: 'Nike Air Max',
imageSrc: require('../images/sneekers02.png'),
price: '$ 240',
rating: 4,
discount: 'none',
favourite: 'no',
},
{
id: 5,
category: 'watch',
name: 'Royal Rolex',
imageSrc: require('../images/watch.png'),
price: '$ 50',
rating: 5,
discount: 'none',
favourite: 'no',
},
{
id: 6,
category: 'shoe',
name: 'Hiker Max',
imageSrc: require('../images/sneekers03.png'),
price: '$ 180',
rating: 4.5,
discount: 'none',
favourite: 'no',
},
{
id: 7,
category: 'backpack',
name: 'School Bag',
imageSrc: require('../images/backpack01.png'),
price: '$ 120',
rating: 3.5,
discount: '10%',
favourite: 'no',
},
{
id: 8,
category: 'watch',
name: 'Silver Liner',
imageSrc: require('../images/watch01.png'),
price: '$ 35',
rating: 4.5,
discount: '22%',
favourite: 'yes',
},
{
id: 9,
category: 'shoe',
name: 'Leather Sneaker',
imageSrc: require('../images/sneekers01.png'),
price: '$ 200',
rating: 4,
discount: 'none',
favourite: 'no',
},
];

Answer 1

The problem is that your are looping the array but returning just the first element.
the correct way to do it is via map
const renderProducts = () => {
for (let i = 0; i < Products.length; i++) {
const element = Products[i];
return ( //return just the first
<ProductCard>
...
</ProductCard>
);
}
};
const renderProducts = () => products.map((element, i) => {
return (
<ProductCard key={i}>
...
</ProductCard>
);
};