How to loop inside React JSX

0 votes

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component):

<tbody>
    for (var i=0; i < numrows; i++) {
        <ObjectRow/>
    } 
</tbody>

I realize and understand why this isn't valid JSX, since JSX maps to function calls. However, coming from template land and being new to JSX, I am unsure how I would achieve the above (adding a component multiple times).

javascript reactjs

Jul 22, 2020 in Angular by kartik
• 37,520 points
373 views

1 answer to this question.

0 votes

Hello @kartik,

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 (var 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:

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

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

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we add 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.

Hope it helps!!

Thank you!!

answered Jul 22, 2020 by Niroj
• 82,760 points

Related Questions In Angular

0 votes
1 answer

How do I conditionally add attributes to React components?

Hello @kartik, For certain attributes, React is intelligent ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
4,169 views
0 votes
1 answer

How to update nested state properties in React

Hello @kartik, In order to setState for a nested object ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
5,950 views
0 votes
1 answer

How to specify a port to run a create-react-app based project?

Hello @kartik, You could use cross-env to set the port, ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,760 points
2,622 views
0 votes
1 answer

How can we redirect to an existing route using ngRoute?

Routing is just another way of fixing some content ...READ MORE

answered Feb 6, 2020 in Angular by Niroj
• 82,760 points
845 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
1,310 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 4, 2020 in Java-Script by Niroj
• 82,760 points
227 views
0 votes
1 answer

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, You  just need to put your ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,760 points
2,246 views
0 votes
1 answer

How to have conditional elements and keep DRY with Facebook React's JSX?

Hello @kartik, Let's define a simple helping If component: var If ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
123 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,760 points
614 views