How to dynamically name variables in React

I'm very new and I was practicing with react.

The TL;DR of this post is that I want to dynamically create some variables in react and I can't.

I'm creating a web page of a store with React. So in order to do the home page where the products are displayed, I wrote a Product component that takes some properties like this

import React from 'react'


function Product({id,title,image,image_description,price,description}) {
    return (
        <div >
            <div >
                <p>{title}</p>
                <b>{price}$</b>
                <img src={image} alt={image_description}/>
                <p>{description}</p>
            </div>
        </div>
    )
}

export default Product

Then I created a ProductDataComponent where I created an array that contains some objects with those properties

var productData = [
// 0
    {
        id : 10,
        title: 'Jugo de Naranja', 
        image: 'urlOfImage.com', 
        image_description: 'Juguito de naranja' , 
        price: 100, 
        description: 'Un rico jugo de naranja'  
    },
//1 
{
  etc
}
];


export default productData

Then I imported that component in the home component, and in order to make the code cleaner, I made some variables that takes one element of the array

import React from 'react'
import Product from './Product'
import './Home.css'
import productData from './ProductDataComponent'

var  p0 = productData[0]
var  p1 = productData[1]

function Home() {
    return (
        <div className='home'>
            <div className="home__container">
                <div className="home__row">
                    <Product id={p0.id} title= {p0.title} image={p0.image} image_description={p0.image_description} price={p0.price} description={p0.description}/>
                    <Product id={p2.id} title= {p2.title} image={p2.image} image_description={p2.image_description} price={p2.price} description={p2.description}/>
                </div>
            </div>
        </div>
    )
}

export default Home

And to that point the code worked fine.

The problem is that I want to automate the making of variables process, so I don't have to write manually every time that I add a new object in the array of productData.

I searched a way to do it, and I found 2 ways. One with the eval() method that is evil and doesn't work.

And the other way is doing a for loop like this

var i 
for (let i = 0; i < productData.length; i++) {
    window['p'+i] = productData[i];
}

I tested this method in other page isolated in javascript, and it worked but when I put it in the home component in react, it doesn't work.

This is what the web page shows.

Failed to compile

src\Home.js
  Line 32:34:   'p0' is not defined  no-undef
  Line 32:49:   'p0' is not defined  no-undef
  Line 32:66:   'p0' is not defined  no-undef
  Line 32:95:   'p0' is not defined  no-undef
  Line 32:124:  'p0' is not defined  no-undef
  Line 32:147:  'p0' is not defined  no-undef
  Line 33:34:   'p1' is not defined  no-undef
  Line 33:49:   'p1' is not defined  no-undef
  Line 33:66:   'p1' is not defined  no-undef
  Line 33:95:   'p1' is not defined  no-undef
  Line 33:124:  'p1' is not defined  no-undef
  Line 33:147:  'p1' is not defined  no-undef

Is there something that I'm doing wrong?

Is there a way to dynamically name variables or automate the process?

PS: I'm not a native English speaker, so please forgive my grammar sins.

you can use map and return jsx:

const rednderedProduct =productData.map( (p)=> {return <Product id={p.id} title= {p.title} image={p.image} image_description={p.image_description} price={p.price} description={p.description}/> })

and then in return part of component:

return({rednderedProduct})

something like that...