Iterate through an i18next JSON file to map data in a Class Component

Question

I have been trying to refactor code from data being set manually to mapping through a JSON file, more specifically translations using i18next.

Here is what the code looked like:

constructor(props) {
    super(props)
    var p1 = <Product
        img={ImageTruth}
        position={0}
        title={'title'}
        text={'text'}
        isBought={false}
        id={1}
        handleRemove={this.handleRemove}
    />
    var p2 = <Product
        img={ImageLies}
        position={3}
        title={'title'}
        text={text'}
        isBought={false}
        id={2}
        handleRemove={this.handleRemove}
    />
    var p3 = ...

    products.push (p1, p2, p3, p4, p5, p6)

    var selectedProduct = p1

    this.state = {
        products: products,
        selectedProduct: selectedProduct,
        bought: [],

        touchStartX: null,
        touchEndX: null,
        isOpen: false,
    }

Here is what I replaced it with:

// pulling Object from translations
var products_t = t('pulsesInfos', { ns: 'cards', returnObjects: true })

if (Object.values(products_t)[0]['text'] !== undefined) {

    // mapping through translations array of Objects
    Object.values(products_t).map(productItem => {
        const img1 = require('../img/pulses/' + productItem.image)
        const product = (
            <Product
                img={img1}
                position={0}
                title={productItem.title}
                text={productItem.text}
                isBought={false}
                id={productItem.id}
                handleRemove={this.handleRemove}
            />
        )
        // adding to the array for render
        products.push(product)
        
        if( productItem.id == 1 ){
            this.state = { selectedProduct: product }
            // setting selectedProduct with currrent one in loop if id=1
        }
    })
}

    this.state = {
        products: products,
        selectedProduct: selectedProduct, // when leaving this line, right side argument shows undefined
        bought: [],

        touchStartX: null,
        touchEndX: null,
        isOpen: false,
    }

However it returns: 'Failed to Compile' : selectedProduct is undefined.

For context, there are controls (left and right) that allows user to changer selectedProduct and Add it to Cart.

Is it a mistake of scope? or something else I'm missing? Thanks.