Tengo una API. cuando llamo a esa API. Estoy recibiendo objetos para 3 productos diferentes. así que a partir de ahora estoy representando ese producto en mi pantalla configurando el nombre de la imagen de cada producto en un estado como este

 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); })

Pero, ¿qué pasa si tengo que buscar más de 500 productos y tengo que mostrar todo como nombre, precio y todo? Entonces, ¿cuál es la forma correcta de hacerlo? por favor ayuda

esta es mi respuesta

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