Resolved promise but unable to insert data into react project

enfant terrible

Hi guys,

Using contentful as my CMS and retrieving my content using code below

const ProductsGrid = () => {   

let imageURL;
    const client = createClient({       

client.getEntries().then(function (entries) {       

entries.items.forEach(function (entry) {     

imageURL = 'http://' + entry.fields.image.fields.file.url           

console.log(imageURL)       

} )   

})

In the console I can see I am retrieving my images successfully from my CMS

http:////images.ctfassets.net/zpu537igy6hd/10jOjKpdTYAYRVc197KlAs/60910da04dceab7acda47c042261776e/397526804_263713576623932_2944288645324919698_n.jpg
ProductsGrid.jsx:17

unsafe:http:////images.ctfassets.net/zpu537igy6hd/2fat5G5gnOIT00YAdoSVZg/ea3f8c44b62cf977bc8a0d5b3e4eeea7/397492507_267421149586508_6988846565487064728_n.jpg

But when I try to render these images they are not been displayed, when I click on img tag I get undefined

return (

<figure className='px-4 pt-4'>                           

<img  src={imageURL} alt={title}  className='rounded-xl h-64 md:h-48 w-full object-cover'  />                       

</figure>

If I copy the links from my console directly into my img tag above they work, but when I try render them from imageURL they fail.

Think it may be how I'm declaring imageURL at top of script and this is then been rendered by react before promise has resolved.

But unsure how else to get imageURL in scope to to render in img tag.

Any help appreciated.

daymobrew

It looks like the 'http://' part is not needed.

Try change:

imageURL = 'http://' + entry.fields.image.fields.file.url

to

imageURL = entry.fields.image.fields.file.url