title: Creating a Mega menu in react with loop
body: <p>I have created a mega menu where the values will be dynamic (coming from the API). So you never know how many links will be there. But for testing purpose I've put 50 texts in array <code>menu</code> and trying to loop over that so that it look <a href="https://ibb.co/m0sHtj1" rel="nofollow noreferrer">Like this</a> . So there's a parent row and inside that there are 5 columns, each containing 5 links. Per row will contain 5 columns or 25 links.</p>
  <p><strong>JSX</strong></p>
  <pre><code>const menu = [
    &quot;one&quot;,
    &quot;two&quot;,
    &quot;three&quot;,
    &quot;four&quot;,
    &quot;five&quot;,
    &quot;one&quot;,
    &quot;two&quot;,
    &quot;three&quot;,
    &quot;four&quot;,
    &quot;five&quot;,
   ... (total 50)
  ];
  
             &lt;Box className={classes.rows}&gt;
                &lt;Box className={classes.cols}&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                &lt;/Box&gt;
                &lt;Box className={classes.cols}&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                &lt;/Box&gt;
                &lt;Box className={classes.cols}&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                &lt;/Box&gt;
                &lt;Box className={classes.cols}&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                &lt;/Box&gt;
                &lt;Box className={classes.cols}&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                  &lt;Typography variant=&quot;body1&quot; className={classes.link}&gt;
                    Link 1
                  &lt;/Typography&gt;
                &lt;/Box&gt;
              &lt;/Box&gt;
  </code></pre>
  <p>I tried using for loop and then create another 2D array. And later planned to map through that array inside JSX.</p>
  <pre><code> let links = [];
  
    if (menu.length != 0) {
      for (let i = 0; i &lt; menu.length; i++) {
        for (let j = 0; j &lt; 5; j++) {
          links.push(menu[i]);
        }
      }
    }
  </code></pre>
  <p>But it won't work I know. Can anyone help me with this?</p>