How To Render MUI Component through For Loop in ReactJS

Question

hope you're doing good.

I'm working on an Advent / Chocolate Box Calendar in ReactJS and am trying to iterate over a for Loop for the number of days in December.

I have an issue understanding how to render it to my container in my return statement.

Code Snapshot

Here is the code in actual text:

const Calendar = () => {
  // For Loop Here for each Day in December (31 Days)
  for (let days = 31; days < array.length; days++) {
    // Grid Item to Be Rendered for each Day
    <Grid item>
      <Box
        sx={{
          width: 300,
          height: 300,
          backgroundColor: 'primary.dark',
          '&:hover': {
            backgroundColor: 'primary.main',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </Grid>;
  }
};
return (
  <Grid container spacing={1}>
    {/* Want To Generate <Grid item> Here Through for Loop */}
  </Grid>
);

I want to be iterated over 31 times to amount for the total of days in December and render it in my return statement below the Grid component. I've tried to use an array to push the Grid item into and render it but it didn't work.

Any thoughts on how I could do this?

Thanks in advance

Answer 1

Thanks everyone for taking your time to help, I found that this code below worked via @jspcal reference to this link for a more concise answer: React render multiple buttons in for loop from given integer

Here is the code I wrote to make it work:

// I added a constant 'box' and set an empty array
  const box = [];

  // I initiated days as 0 instead of 31 and if days are less than 31 then
  // for loop iterates over it until it reaches that number.
  for (let days = 0; days < 31; days++) {
    // Then the code pushes each time it loops to the empty array I initiated.
    box.push(
      <Grid item>
        <Box
          sx={{
            width: 300,
            height: 300,
            backgroundColor: 'primary.dark',
            '&:hover': {
              backgroundColor: 'primary.main',
              opacity: [0.9, 0.8, 0.7],
            },
          }}
        />
      </Grid>
    );
  }
  return (
    <Grid container spacing={1}>
      {/* And here I render the box array */}
      {box}
    </Grid>
  );

And here is a snapshot of my code for better visuals:

Thanks once again everyone!

Answer 2

In React, it is done using map . Check out react docs on rendering multiple components

 <Grid container spacing={1}>
    {days.map((day) => {
    return (<Grid item key={day}>
      <Box
        sx={{
          width: 300,
          height: 300,
          backgroundColor: 'primary.dark',
          '&:hover': {
            backgroundColor: 'primary.main',
            opacity: [0.9, 0.8, 0.7],
          },
        }}
      />
    </Grid>)
})
  </Grid>