Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(
    for (let i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

const rows = [];
for (let i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can basically use the same structure when working with JSX:

const rows = [];
for (let i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

Answer from Sophie Alpert on Stack Overflow
🌐
Reddit
reddit.com › r/reactjs › can i use a for loop with jsx? to render something 3 times?
r/reactjs on Reddit: Can I use a for loop with JSX? To render something 3 times?
August 31, 2021 -
let sampleOutput =()=>{
  return
    for(let i=0;i<3;i++){<p>hi</p>}  
}


trying to display hi 3 times inside

return()

in my component. I know how to .map or .forEach for objects and arrays but what if my store or variable is just a number, I assume forloop doesnt work?

Discussions

reactjs - How to use For loop inside React JSX code - Stack Overflow
I am trying to fetch data in React JSX code using For Loop. const count = 10 return ( {for(let i = 0; i ... More on stackoverflow.com
🌐 stackoverflow.com
For loops ever in React? - The freeCodeCamp Forum
Hey guys, weird function I got going on here that I put in it’s own component. If I pass in a number, it creates that many spans. Is there any way not to use a for loop here or is this the only time when you have nothing… More on forum.freecodecamp.org
🌐 forum.freecodecamp.org
0
February 3, 2020
Can I use a for loop with JSX? To render something 3 times?
[...Array(3).keys()].map(key =>

Hi

) More on reddit.com
🌐 r/reactjs
23
2
August 31, 2021
How To Write For Loop & If Logic Statements inside React JSX
Just use `.map` More on reddit.com
🌐 r/reactjs
7
0
June 9, 2021
🌐
GeeksforGeeks
geeksforgeeks.org › reactjs › loop-inside-react-jsx
Loop Inside React JSX - GeeksforGeeks
August 5, 2025 - In this approach, a traditional for loop is used within JSX to dynamically render colored div elements based on the colors array. The loop iterates through the colors array, generating div elements with inline styling for each color.
🌐
Telerik
telerik.com › blogs › beginners-guide-loops-in-react-jsx
A Beginner’s Guide to Loops in React JSX
August 18, 2022 - Wondering how to create loops in React? Learn about JSX and how to use methods like the map function to loop inside React JSX and render a list of items.
🌐
CoreUI
coreui.io › blog › how-to-loop-inside-react-jsx
How to loop inside React JSX · CoreUI
September 27, 2024 - This guide will cover the different ways to render lists and elements using loops in React, focusing on the use of the map function, traditional loops, and best practices. Let’s explore how to create components dynamically and render lists efficiently using React JSX. ... JSX (JavaScript XML) is a JavaScript syntax extension that allows you to write HTML-like code within JavaScript files. However, normal JavaScript constructs, like for loops, aren’t directly supported within JSX because they are statements, not expressions.
🌐
Medium
medium.com › @jayantdwivedi19 › why-for-loops-dont-work-in-jsx-and-why-map-does-b54bba29a45c
Why for Loops Don't Work in JSX (and Why map Does) | by Jayant Dwivedi | Medium
January 27, 2025 - Functional Style: React embraces functional programming principles, and map fits that paradigm better. for loops are not directly usable in JSX because JSX expects expressions, and for is a statement.
Find elsewhere
🌐
Sentry
sentry.io › sentry answers › react › how do you loop inside react jsx?
Loop Inside JSX Using For Loops or the map() Method | Sentry
2 weeks ago - Use a traditional for loop to build an array of JSX elements outside the return block, or call map() directly inside JSX to render a list from an array
🌐
Facebook
facebook.com › groups › ReactJsDevelopersGroup › posts › 2180815955425961
How to create a for loop in JSX
Popular groups · Find communities for you · Over 1 billion people across the globe are using Facebook Groups to explore their favorite topics · Log in · Categories · Science & tech · Travel · Animals · Sports & fitness · Entertainment
🌐
Ronald James
ronaldjamesgroup.com › blog › looping-inside-react-jsx
Looping inside React JSX | Ronald James
However, coming from "template" ... We should think of it like we're just calling JavaScript functions. We can't put a for loop inside a function call:...
🌐
Medium
medium.com › @TheRealScoop › how-to-loop-inside-of-react-jsx-tsx-1a95aa8ccdee
How to loop inside of React JSX/TSX | by The Real Scoop | Medium
August 18, 2022 - If you do not have this, you will get a warning in your console. for (let i = 0; i < myButtons.length; i++) { htmlButtons.push(<button key={i}>{myButtons[i]}</button>); }//{[variable_name]} inside html below is called inlining. You can inline variables, conditional logic, and function calls in React.return <div>{htmlButtons}</div>;
🌐
iFour Technolab
ifourtechnolab.com › blog › loops-in-react-jsx-a-deep-dive-into-the-basics
Loops in React JSX: A deep dive into the basics | iFour Technolab
October 20, 2022 - Loops offer a quick and easy way to accomplish something repeatedly. You may perform repeated tasks in seconds by setting conditions to satisfy. Now the question is how to render loops in React JSX. To address this, we will look at 5 different forms of loops used to render elements in React JSX.
🌐
Angular Minds
angularminds.com › blog › a-guide-on-how-to-use-for-loop-in-react
A Guide on How to Use For Loop in React
August 27, 2024 - In React, directly using traditional loops like for within JSX is not possible due to JSX’s requirement for a single expression. Instead, developers commonly use the map function to iterate over arrays and render a list of elements.
🌐
freeCodeCamp
forum.freecodecamp.org › t › for-loops-ever-in-react › 346935
For loops ever in React? - The freeCodeCamp Forum
February 3, 2020 - { let spans = [] for (let i = 0; i ) } return spans } export default SpanMaker I think another thing to note here is that I am not updating...
🌐
Dayhaysoos
dayhaysoos.com › blog › rendering-components-in-react-with-loop
Nick DeJesus
Developer, writer, and creator of things on the internet. Blog posts about software development, AI, and building products.
🌐
Upmostly
upmostly.com › home › tutorials › how to for loop in react (with examples)
How to Use For Loop in React (with Code Examples)
October 28, 2021 - Although we can write a for loop in React, ES6 provides the more appropriate map function for us to use. As with most things in web development, there are multiple ways to loop, or iterate, through an array in React using JavaScript. Some of the iterators we have at our disposal in JavaScript are: ... Out of the three iterators above, our best option to iterate over an array in React inside of JSX is the Map function.
🌐
Medium
medium.com › @jayantez › loop-inside-react-jsx-d7ab0ebfc82d
Loop inside React JSX. When working with React JSX, you may… | by jayant sharma | Medium
July 4, 2023 - Conclusion: When you need to repeat a component multiple times in React JSX, the map() function is a powerful and flexible tool. It allows you to iterate over an array, create components dynamically, and assign unique key props for efficient ...
🌐
Just Think
justthink.it › articles › react-loop-inside-jsx-code
React: loop inside JSX code - Just Think
March 2, 2018 - But this approach doesn’t work in JSX, as you should compose the returned value from the render function of values, while a for loop is an imperative way of doing thing and doesn’t return anything.
🌐
DhiWise
dhiwise.com › post › mastering-react-looping-through-array-a-comprehensive-guide
Understanding React Looping Through Array
January 10, 2024 - By wrapping the map function inside ... can loop inside React JSX and generate a new array of elements that can be rendered to the DOM. When rendering lists in React, assigning a unique key to each list item is crucial.
🌐
NGCC in Angular Ivy
iq.js.org › questions › react › how-to-loop-inside-jsx
How to loop inside JSX?
December 30, 2021 - For example, the items array of objects is mapped into an array of components: ... This is because JSX tags are transpiled into function calls, and you can't use statements inside expressions.