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}]

CodePudding user response：

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