I want to repeat "★" as many times as a number in state in React

Question

I want to repeat "★" as many times as a number in state in React.

What should I do?

I want to printing like this.

js ★★★
ts ★★
html ★★★

state = {
  myScores: [
    { name: "js", score: 3 },
    { name: "ts", score: 2 },
    { name: "html", score: 3 }
  ]
}

...

const myScores = this.state.myScores.map(
  ({name, score}) => (
    <div>
      {name}
      {
        for(let i=0; i<score; i++) {
          <div>★</div>
        }
      }
    </div>
  )
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

You should have a look at [Loop inside React JSX](https://stackoverflow.com/q/22876978/218196) to learn how to write loops in/with JSX in general. — Felix Kling, Nov 30 '18 at 07:17

Code Maniac · Accepted Answer · 2018-11-30T07:26:55.170

2

All you need to do is replace for loop with.

<div>{"★".repeat(score)}</div>

Reason why your code was not working the way you expected is.

In practice the OP's code will throw an error since you cannot have JavaScript statements inside JSX (i.e. it won't render anything). very well explained by @FelixKling in comments.
Since while iterating through for loop you're adding a new div every time which is a block element.so it will take up the complete width. you can read more about block elements here https://www.w3schools.com/html/html_blocks.asp

edited Nov 30 '18 at 07:26

answered Nov 30 '18 at 05:34

Code Maniac

37,143
5
39
60

1

It should be `"★".repeat(score)`. – Blue Nov 30 '18 at 06:04
@FrankerZ Yeah i missed the quotes thanks for pointing it out. – Code Maniac Nov 30 '18 at 06:18
1

*"you're adding a new div every time which is a block element"* Maybe in theory. In practice the OP's code will throw an error since you cannot have JavaScript statements inside JSX (i.e. it won't render anything). – Felix Kling Nov 30 '18 at 07:18
@FelixKling yeah true. i just answered in that context only i have update the answer. Thanks :) – Code Maniac Nov 30 '18 at 07:27

I want to repeat "★" as many times as a number in state in React

1 Answers1