Product image source claims its undefined when its not

[dev-Tre]

Please complete the checklist before filing an issue:

• Is this a "how to" question? For questions on how to use the SDK, implement features or other related questions, please use our forums.
• Is this something you can debug and fix? Create a pull request and contribute! Bug fixes and documentation fixes are welcome. You can read our contribution guidelines for more details.

None of the above? Create an issue. Be sure to include all the necessary information for us to understand and reproduce the problem:

Bug details

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behaviour:

Please include code samples.

If the error you're dealing with is a network / API issue, please include the value of the X-Request-ID response header, the data sent to the API, and the payload of the response.

Expected behavior
A clear and concise description of what you expected to happen.

Environment (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• SDK Version [e.g. v1.2.0]

Additional context
Add any other context about the problem here.

Bug Report Checklist

• I have read and agree to the CODE_OF_CONDUCT.md
• I have read the CONTRIBUTING.md guidelines.
• I have provided a detailed description of the bug, including code samples, and/or network data.
• I have provided information about my development environment, including SDK version.

[dev-Tre]

Hello I am working with buy sdk and im trying map an array of returned product images objects into a component an dgrab the first image to display. When I call the console.log(product.images[0].src) before the return statement i get the image url. But when I call the product.images[0].src or product.images[0].url inside return I get an error in the console how.

This is the error im getting: link to image

This is my source code:

`import React, { useContext, useEffect } from 'react'
import Header from '../components/Header/Header.js'
import Footer from '../components/Footer/Footer.js'

import { Base64 } from 'js-base64';
import { ShopContext } from '../context/ShopContext.js'
import { Row, Col, Div, Image} from "atomize";
import { Link, useParams } from 'react-router-dom'

const ShopPage = () => {
let { id } = useParams()
const {fetchCollectionWithId, collection} = useContext(ShopContext)

useEffect(() =>{ 
    fetchCollectionWithId(id)
    return() => {
        
    };

},[fetchCollectionWithId, id])

if(collection.length <= 0) {
    return <div>Loading</div>
}



if (collection) {
    if(collection.products){
        //loads information fine here
        console.log(collection.products[0].images[0].src)
        return (
            <>
                <Header/> 
                <Div p="10rem" d="flex" align="center" justify="center">{collection.title}</Div>
                        <Row d="flex" align="center" justify="center">
                                {collection.products.map(product =>(
                                <Col key={product.id} size={{ xs: 10, s: 5, m: 3, lg: 4, xl: 3 }}>
                                    <Link to={`/product/${Base64.encode(product.id)}`}>
                                    <Div 
                                        h={{ xs: "80vh", sm:"100vh", md:"100vh", lg: "45vh", xl:"45vh" }}
                                        // Saying "src" is undefined here
                                        bgImg={product.images[0].src}
                                        bgSize="cover"
                                        bgPos="center center"
                                        hoverShadow="4"
                                        transition="0.3s"
                                        >
                                    </Div>
                                    </Link>      
                                </Col>
                                ))}
                        </Row>
                <Footer/>
            </>
        );
    }
    else{
        return (
            <Div>Products are loading</Div>
        );
    }
}

}

export default ShopPage;`

[rafant97]

I have thesame error, i don´t know how to fix it. Did you fix it?