How to render react components in a for loop?

Question

I would like to render components based on a number constant.

With an array that wouldn't be a problem, but I don't have a solution for the constant.

  const numberOfItems = 4;

  return (
      {/* The for loop should be here, with which 4 <Grid> components should then be rendered */}
        <Grid item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
        </Grid>
   )

Instead of for loop, use lodash library method times. Inside jsx: ```{times(4, (idx) => )} ``` — fazlu, Dec 08 '20 at 12:14
I'm closing this question because the answers will differ in how the array is created (which is an old question by itself), the mapping is eventually the same (return a JSX with `key` prop as mentioned in React docs). — Dennis Vash, Dec 08 '20 at 12:19

Dennis Vash · Accepted Answer · 2020-12-08T12:23:07.617

3

You can create an array and map it:

const numberOfItems = 4;

return [...Array(numberOfItems).keys()].map((key) => (
  <Grid key={key} item xs={12} sm={6}>
    <TextField />
  </Grid>
));

See related question for additional ways of creating an array.

edited Dec 08 '20 at 12:23

answered Dec 08 '20 at 12:13

Dennis Vash

50,196
9
100
118

score 0 · Answer 2 · answered Dec 08 '20 at 12:16

You can use the Array constructor

{Array.from(new Array(4)).map((_, i) => (
  <Grid key={i} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
))}

score 0 · Answer 3 · answered Dec 08 '20 at 12:17

You can use new Array(numberOfItems).fill(0) to define an array with a number of items based on a constant. If you have a dynamic number of items as props, you can do the following (using React.useMemo to only generate the itemsArray once when numberOfItems has changed):

const Component = ({ numberOfItems }) => {

  const itemsArray = React.useMemo(() => {
     return new Array(numberOfItems).fill(0);
  }, [numberOfItems]);
    
  return (
   <div>
    {itemsArray.map((_, index) => (
       <Grid key={index} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
       </Grid>
    ))}
   </div>
  );
}

Otherwise, with a constant defined:

const numberOfItems = 4;
const itemsArray = new Array(numberOfItems).fill(0);

const Component = () => {

  return (
   <div>
    {itemsArray.map((_, index) => (
       <Grid key={index} item xs={12} sm={6}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
       </Grid>
    ))}
   </div>
  );
}

score 0 · Answer 4 · answered Dec 08 '20 at 12:18

If you use something like Lodash you can use _.times:

  return (
      {_.times(4, index =>
        <Grid item xs={12} sm={6} key={index}>
          <TextField
            required
            id="quadrant-one"
            name="quadrant-one"
            label="Quadrant 1"
            fullWidth
          />
        </Grid>
      )}
   )

How to render react components in a for loop?

4 Answers4