Loop inside React JSX

clock icon

asked 1 year agoAsked

message

1Answers

eye

53Views

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).

1 Answers

To achieve this in React JSX, you can map over an array of the desired length and return the `` component for each iteration. Here's an example of how you can do it:

```jsx

{Array.from({ length: numrows }, (_, index) => (

)}

```

In this code snippet:
- `Array.from({ length: numrows }, (_, index) => ...)` creates an array with `numrows` number of elements and then maps over each element.
- `(_, index)` destructures the current element index. We're not using the element itself, so we use an underscore `_`.
- `key={index}` is used to provide a unique key for each `` component. This is important for React to efficiently update the components.

By using this approach, you can dynamically render multiple instances of the `` component based on the `numrows` value.

Write your answer here

Top Questions

    Made with by Haseeb Yousuf