How to dynamically name variables in React

Question

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 seem to be solving the wrong problem, you should not store data in the window object. You can use map to dynamically create elements — MaartenDev
– MaartenDev, Commented Oct 30, 2021 at 20:33

MaartenDev · Accepted Answer · 2021-10-30 20:35:20Z

1

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

answered Oct 30, 2021 at 20:35

MaartenDev

5,8305 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ebay · Accepted Answer · 2021-10-30 20:36:30Z

0

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

edited Oct 30, 2021 at 20:36

answered Oct 30, 2021 at 20:31

Ebay

3813 silver badges13 bronze badges

1 Comment

Fabian Over a year ago

Wow, so fast!! , your soultion worked. And the solution of MaartenDev also worked, but with this solution i can choose what element of the array i can display by puting '{renderedProduct[1]}' or '{renderedProduct[2]}'. Thank you.

Collectives™ on Stack Overflow

How to dynamically name variables in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related