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
🌐
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>;
Discussions

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 generate react html in a loop [duplicate]
Okay so this is has been driving me mad for the past few hours. Pretty much i want to have a function that generates html based off of objects in an array that are passed to it as an argument. My C... More on stackoverflow.com
🌐 stackoverflow.com
reactjs - Create HTML from for loop in JSX with React.js - Stack Overflow
The key to remember is that the ... a single React component (e.g., if you wrap this result in another JSX tag, you're okay.) Secondly, it appears that you are not letting data flow from the top-level component on down; specifically, that you do not use the Row component to pass data to Column components. This is what makes writing your loop so difficult. Instead of trying to manage both Rows and Columns, you need only to pass the data needed for a single row ... More on stackoverflow.com
🌐 stackoverflow.com
February 28, 2015
reactjs - Using for loop render some Html elements in React render function - Stack Overflow
I am trying to render some html using for loop. Every thing work fine but the html prints like a string inside that UL element I dont know what I did wrong pls help me with this. I am new to this R... More on stackoverflow.com
🌐 stackoverflow.com
December 9, 2015
🌐
Telerik
telerik.com › blogs › beginners-guide-loops-in-react-jsx
A Beginner’s Guide to Loops in React JSX
August 18, 2022 - Learn about JSX and how to use methods like the map function to loop inside React JSX and render a list of items. If you have worked with React before, then there is a high probability that you know what JSX is, or have at least heard of it. JSX is a custom syntax extension to JavaScript which is used for creating markup with React.
🌐
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 - Out of the three iterators above, our best option to iterate over an array in React inside of JSX is the Map function. Let’s begin by exploring how we can use the Map iterator to loop through elements in an array and render out some HTML for each of those elements.
🌐
Stack Abuse
stackabuse.com › how-to-loop-in-react-jsx
How to Loop in React JSX
June 15, 2022 - If the item you’re trying to loop through does not have a unique element, such as a unique id - it is a common convention to use the index returned by the map() function for each iterated element instead, ensuring unique element identification without changing your domain model: { todos.map((todo, index) => ( <div key={index}> <p key={todo.text}> {todo.text} - {todo.status} </p> </div> )); } In this short tutorial, we’ve covered the basics of looping in React JSX, how keys work, as well as how to add a unique key to iterable elements.
🌐
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. Users can add new colors to the list using the approach2Fn function, demonstrating dynamic rendering and user interaction within a React component.
🌐
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 - Let's explore how to effectively use loops in React application, particularly the for loop, along with alternative methods like the map function, to render elements. In React applications, JSX is used to describe what the UI code should look like. It allows us to write HTML-like syntax directly ...
Find elsewhere
🌐
Medium
medium.com › frontendweb › how-to-use-loops-in-react-js-4953cc2ff0c7
How to use loops in React.js?
December 25, 2022 - It take time create or recreate app with for and while loop. You can use forEach() directly in reactjs.
🌐
Thinkster
thinkster.io › tutorials › iterating-and-rendering-loops-in-react
Iterating & Rendering with Loops in React components - Thinkster
In React (and other frameworks), the most basic way of doing this is hard coding the entries into your HTML (view code): var Hello = React.createClass({ render: function() { return ( <ul> <li>Jake</li> <li>Jon</li> <li>Thruster</li> </ul> ) } }); Easy enough!
🌐
Delft Stack
delftstack.com › home › howto › react › for loop in react
The for Loop in React | Delft Stack
January 30, 2023 - React does not recommend using the index value to generate a unique value for the key property. If you’re going to use the .map() method to render multiple components, you can also pass down the props. Let’s say we’re trying to render multiple Product components. Here’s how we would pass the props: return <div> {data.map(product => <Product price={product.price} name={product.name}></Product>)} </div> Another way to loop over an array is to use the for loop.
🌐
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?

🌐
ACTE
acte.in › home › how to use for loop in react: a comprehensive guide
How to Use For Loop in React: Quick Guide | Updated 2026
CyberSecurity Framework and Implementation Article - Learn How to Use For Loopin React to Efficiently Render Lists and Elements. This Quick Guide Covers Syntax, Best Practices, Real-World Examples, and Tips. One of best Institute to learn CyberSecurity Framework and Implementation from ACTE . Really impressive model where you can learn technical Skills , Soft Skill and get help to kick start your first Job as well.
Rating: 5 ​
🌐
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
Top answer
1 of 2
4

On a recent project I did something similar, but with table rows/columns.

var TableBody = React.createClass({
  render: function(){
    var columns = this.props.columns;
    var data = this.props.data;

    return (
      <tbody>
        {data.map(function(item, idx){
          return <TableRow key={idx} data={item} columns={columns}/>;
        })}
      </tbody>
    )
  }
});

My <TableRow /> component looks like:

var TableRow = React.createClass({
  render: function() {
    var columns = this.props.columns;
    var data = this.props.data;
    var td = function(item) {

        return columns.map(function(c, i) {
          return <td key={i}>{item[c]}</td>;
        }, this);
      }.bind(this);

    return (
      <tr key={data}>{ td(data) }</tr>
    )
  }
});
2 of 2
2

Two things jump out at me when I look at your code.

The first is that you are returning an array of React components from the renderTemplates function. This may be okay depending on how you use the output. The key to remember is that the return value from your component's render function must be a single React component (e.g., if you wrap this result in another JSX tag, you're okay.)

Secondly, it appears that you are not letting data flow from the top-level component on down; specifically, that you do not use the Row component to pass data to Column components. This is what makes writing your loop so difficult. Instead of trying to manage both Rows and Columns, you need only to pass the data needed for a single row to a Row component. The Row component will then pass each piece of data to a Column component. This removes the need to juggle opening and closing tags and simplifies the code overall.

Following is an example implementation of what I have described. I use table-related tags for rendering, but you can use divs or whatever is most appropriate for you. At the time of writing, there isn't much information about what is in templates, so I've created a silly little example to use.

var KvpColumn = React.createClass({
    render: function() {
        return <td>{this.props.kvp.key}: {this.props.kvp.value}</td>;
    }
});

var KvpRow = React.createClass({
    render: function() {
        return (
            <tr>
            {this.props.items.map(function(item) {
                return <KvpColumn key={item.key} kvp={item}/>;
            })}
            </tr>
        );
    }
});

var ObjectIDsTable = React.createClass({
    render: function() {
        var templates = this.props.templates;

        var propertyNames = Object.getOwnPropertyNames(templates);
        var group = [];
        var rows = [];
        var cols = Number(this.props.cols) || 2;

        for(var i = 0; i < propertyNames.length; i++) {
            var key = propertyNames[i];

            group.push({key: key, value: templates[key]});
            if(group.length === cols) {
                rows.push(<KvpRow key={group[0].key} items={group}/>);
                group = [];
            }
        }

        if(group.length > 0) { // catch any leftovers
            rows.push(<KvpRow key={group[0].key} items={group}/>);
        }

        return <table>{rows}</table>;
    }
});    

// something silly as a simple example
var templates = { a: 'b', c: 'd', e: 'f', g: 'h', i: 'j' };    
React.render(<ObjectIDsTable templates={templates} cols="2"/>, document.getElementById('app'));

If you have access to Underscore or lodash, you can simplify the logic in ObjectIDsTable a bit further (and avoid writing loops altogether!):

var ObjectIDsTable = React.createClass({
    render: function() {
        var templates = this.props.templates;

        var rows = _.chain(Object.getOwnPropertyNames(templates))
            .map(function(key) { return { key: key, value: templates[key] }; })
            .chunk(this.props.cols || 2)
            .map(function(group) { return <KvpRow key={group[0].key} items={group}/>; })
            .value();

        return <table>{rows}</table>;
    }
});

You can see this in action on Plunker.

🌐
Reactgo
reactgo.com › home › react for loop to render elements
React for loop to render elements | Reactgo
December 14, 2022 - import React from "react"; class App extends React.Component { render() { const users = ["user1", "user2", "user3"]; const final = []; for (let user of users) { final.push(<li key={user}>{user}</li>); } return ( <div className="App"> <ul>{final}</ul> </div> ); } } export default App; In the above example, we learned how to use for loop to render the array of elements now we can do it same thing by using JavaScript map method.
🌐
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.
🌐
Intellipaat
intellipaat.com › home › blog › how to use for loop in react? (with examples)
How to Use For Loop in React? (With Examples) | Intellipaat
April 15, 2025 - Using a “for” loop, we iterate ... joined by commas. In React, the “for/in” loop is a handy construct that allows you to iterate over the properties of an object....