Loop Based Rendering

We can use JavaScript loops to easily render multiple components and perform other repetitive tasks without needing to repeat the code.

For example, we can create multiple instances of a component and store it in an array that can be directly rendered using the embed method.

Code explanation

In the index.js, there is a component called Grid, which contains the main <div> element having an id grid.

There's an empty array called blocks in the function, which is then populated with Block components using nested for loops. Each Block component appended to the array has a color value, either light blue or empty string - indicating the default color(white).

This color is assigned based on the condition (i + j) % 2 == 0, which ensures that each consecutive block has a different color.

In index.css, we set the display of the #grid object to grid, and using the repeat() function, we create 18 rows and 18 columns, each having a width/height of 27px. This arranges all those Block components (which are basically <div> elements) into a neat 18x18 grid structure).