How to dynamically name variables in React-CodePudding

Hello im very new and i was practicing with react.

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

i'm doing a web page of a store with React. So in order to do the home page where the products are displayed, i made 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 made a component named "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 more clean, 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 find 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 does'nt 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 dynamicaly name variables or automate the process?

ps: i'm not a native english speakear so please , forgive my grammar sins.

CodePudding user response：

You seem to be searching for a way to dynamically make react elements. This can be done using map. Checkout the following example:

import productData from './ProductDataComponent'

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

Checkout the react docs: Rendering multiple components

CodePudding user response：

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...