I have An API. when I call that API. I am getting objects for 3 different products. so as of now I am rendering that product in my screen by setting each product image name in state like this
fetch('http:api', {
method: 'GET',
headers: {'Content-Type': 'application/json'},
})
.then((returnValue) => returnValue.json())
.then((response) => {
setImageForBrand1(response.data[2].images[0].substr(8, 17));
setEngNameForBrand1(response.data[2].englishBrands);
setArbNameForBrand1(response.data[2].arabicBrands);
setImageForBrand2(response.data[2].images[0].substr(8, 17));
setEngNameForBrand2(response.data[2].englishBrands);
setArbNameForBrand2(response.data[2].arabicBrands);
setImageForBrand3(response.data[2].images[0].substr(8, 17));
setEngNameForBrand3(response.data[2].englishBrands);
setArbNameForBrand3(response.data[2].arabicBrands);
})
But what if I have to fetch 500+ products And have to render all like name, price, and all . so what is the right way to do that. please help
this is my response
this is brand data[{"images":[],"isDeleted":false,"_id":"60f04d8f83076b5768e819b0","englishBrands":"HP","arabicBrands":"حصان","parent":"undefined","status":"1","createdAt":"2021-07-15T15:00:31.953Z","updatedAt":"2021-07-15T15:00:31.953Z","__v":0},{"images":[],"isDeleted":false,"_id":"60f0585183076b5768e819cf","englishBrands":"Acer","arabicBrands":"حصان","parent":"undefined","status":"1","createdAt":"2021-07-15T15:46:25.618Z","updatedAt":"2021-07-15T15:46:25.618Z","__v":0},{"images":["uploads\\1626469622418.jpg"],"isDeleted":false,"_id":"60f1f4f61a5bbf1bcccf2e59","englishBrands":"name English","arabicBrands":"name
Arabic","parent":"undefined","status":"1","createdAt":"2021-07-16T21:07:02.536Z","updatedAt":"2021-07-20T19:50:21.273Z","__v":0}]
api().then
{res => {
setDate(res.data);
}}
//make a one variable data then set you response
<Flatlist
data={data}
renderItem={({item, index}) => (
//you get you object in item and index
<View>
<Image source={{uri: '//you image link'}} />
<Text>{item.englishBrands}</Text>
</View>
)}
/>
For best understand ref this document React native flatlist