Create loop inside React JSX

While playing with React I needed to create a loop to print a defined number of items. I was surprised that using JSX it wasn’t very intuitive how to do so. After some Googling, this is what I found.

The magic map function will accept an empty array of your defined length. In my case, 7.

When using it inside a React component it looks like this:

Do you know of a simpler way of creating a loop, such as a for, inside a React component?


3 Responses to “Create loop inside React JSX”

  1. Tran June 6, 2016 at 11:19 am #

    Nice googling xD

  2. Darryl Dexter July 10, 2016 at 9:59 pm #


  3. elias ghali June 16, 2017 at 12:57 pm #

    Actually, i am a problem related to this issue, since i need the for loop in my render method, and this is not possible

    for example this code is not acceptable in JSX

Leave a Reply

Add <code> Some Code </code> by using this tags.