CODEWITHSUNDEEP
reactjsaxiosstrapi
Shugi Yen
Shugi Yen

Reputation: 171

Why am i getting an empty array in my image? Fetching data from strapi

Below are snippets of my code. Im mapping my data to rename item.image.url but I am getting and undefined value on my image.

export function flattenProducts(data) {
  return data.map((item) => {
    let image = item.image.url
    return { ...item, image };
  });
}
React.useEffect(() => {
 
    axios.get(`${url}/products`).then((response) => {
      
      const products = flattenProducts(response.data);
      console.log(products);
    });
}, []);

Please see the images below. Any help is appreciated. Thank you

data from strapi

Console log result

Images not rendering

Upvotes: 3

Views: 1282

Answers (2)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2119

Your question actually answers itself. You try to map Strapi thinks that your image is an array (of images or other data). When you try to map item.image.url it is not actually right. Even if you have one item in the array, you can not refer it without pointing out the index of the array element. For example it would work if you write item.image[0].url instead of item.image.url inside flattenProducts function, as @viet pointed out. Try:

export function flattenProducts(data) {
  return data.map((item) => {
    let image = item.image[0].url
    return { ...item, image };
  });
}

The best solution for the problem would be changing the content type of your image element inside Strapi Admin Panel.

Upvotes: 3

Viet Dinh
Viet Dinh

Reputation: 1951

Following your data return. The item.image is an array. So, let image = item.image[0]?.url should work.

Upvotes: 1

Related Questions