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

user_14203412 0
Viewed 865

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

axios strapi reactjs
2 Answers

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.

user_43075340

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

user_106614090
Related