How to write dynamically in Javascript (react project)

Question

I had a static code that was working just fine, but when I tried to use a map() over a array to produce the same result dynamically, it doesn't work anymore.

I think that I made a syntax mistake when mapping my array. Can someone point out what is my mistake?

Here is the old static code that works fine:

const GridContent = (props)=>{
    return (
        <div className={classes.Container}>
           <ProgressBar percentage="100" styleName="ProgressBar1"></ProgressBar>
           <ProgressBar percentage="24" styleName="ProgressBar2"></ProgressBar>
           <ProgressBar percentage="48" styleName="ProgressBar3"></ProgressBar>
        </div>
    );
}

Here is what I tried to make it dynamic:

const fakeData3=[{percentageItem: '100'}, {percentageItem: '24'}, {percentageItem: '48'}, {percentageItem: '12'}, {percentageItem: '90'}, {percentageItem: '57'}, {percentageItem: '72'}, {percentageItem: '50'}, {percentageItem: '39'}]

const GridContent = (props)=>{
    return (
        <div className={classes.Container}>
            {fakeData3.map((item, index)=>{
                return <ProgressBar percentage={`"${item.percentageItem}"`} styleName={`"ProgressBar${index+1}"`}></ProgressBar>
            })}
        </div>
    );
}

I think there is a syntax mistake on the return of my last part of code ...

Why do you think there's a mistake? Is something not working in some way? — David
– David, Commented Jan 18, 2021 at 16:09

andy mccullough · Accepted Answer · 2021-01-18 16:13:40Z

3

I think you have overcomplicated your quotes here -

<ProgressBar percentage={`"${item.percentageItem}"`} styleName={`"ProgressBar${index+1}"`}></ProgressBar>

try -

<ProgressBar percentage={item.percentageItem} styleName={`ProgressBar${index+1}`}></ProgressBar>

edited Jan 18, 2021 at 16:13

answered Jan 18, 2021 at 16:09

andy mccullough

9,6817 gold badges38 silver badges64 bronze badges

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

2 Comments

Yonathan Cohen Over a year ago

It works perfectly !! Many thanks :) I thought I needed to display the " " to keep the same structure than when it was not dynamic. Why is it now useless ?

andy mccullough Over a year ago

attributes/props in react can either be object based e.g myProp={myValue} or string based e.g. myProp="myValue", but since you need to use string template to inject some value using ${val} you have to use the object notation along with template literal string.

Yuan-Hao Chiang · Accepted Answer · 2021-01-18 16:12:03Z

2

You're mixing quotations. The right code should be:

return <ProgressBar percentage={item.percentageItem} styleName={`ProgressBar${index+1}`} />

percentage is already a string, so you can use it directly as {item.percentageItem}
If you do `"something"`, styleName is actually becoming "\"something\"" (notice the escaped ") internally.

answered Jan 18, 2021 at 16:12

Yuan-Hao Chiang

2,64312 silver badges22 bronze badges

Comments

Yago Azedias · Accepted Answer · 2021-01-18 16:18:19Z

-1

You have to remove the redoundant double quotes:

{fakeData3.map((item, index) => (
    <ProgressBar percentage={item.percentageItem} styleName={`ProgressBar${index+1}`} />
))}

edited Jan 18, 2021 at 16:18

Yago Azedias

4,9484 gold badges20 silver badges32 bronze badges

answered Jan 18, 2021 at 16:08

TheTisiboth

1,7011 gold badge8 silver badges18 bronze badges

2 Comments

andy mccullough Over a year ago

the OP has return which does the same job within {}

TheTisiboth Over a year ago

@andymccullough Oh yes you are right, that is not the problem here then. It is most likely due to the double quotes then

Collectives™ on Stack Overflow

How to write dynamically in Javascript (react project)

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related