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

hi perhaps this might be of interest stackoverflow.com/questions/64655265/… — jspcal
– jspcal, Commented Dec 24, 2021 at 4:19
@jspcal Hi, thanks It worked, much appreciated buddy. Take care of yourself man :) — Mustafa Said Helal
– Mustafa Said Helal, Commented Dec 24, 2021 at 4:31

Mustafa Said Helal · Accepted Answer · 2021-12-24 04:41:24Z

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!

agenthunt · Accepted Answer · 2021-12-24 04:22:11Z

1

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>

answered Dec 24, 2021 at 4:22

agenthunt

8,6883 gold badges32 silver badges26 bronze badges

3 Comments

Mustafa Said Helal Over a year ago

Hi, I tried using the .map method, however it didn't work for me as I was looking to iterate over a number and not an array, will this work as well? Thanks for taking your time to help man

agenthunt Over a year ago

Technically, a number cant be iterated but a range can be , Something like [...Array(31).keys()].map() I guess?

Mustafa Said Helal Over a year ago

I found the answer and posted it here, thanks for the help and for the knowledge you've spread :) @agenthunt I ain't the best in JS but sure can use more knowledge regarding it! Take care of yourself man :D

Collectives™ on Stack Overflow

How To Render MUI Component through For Loop in ReactJS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related