title: React router loop and return
body: <p>I am trying to return my routes from an array using loop. I have an app.js file where my code is like this:</p>
  
  <pre><code>  return (          
        &lt;Switch&gt;
          &lt;Route path="/" component={() =&gt; &lt;HomePage /&gt;} exact /&gt;
          &lt;Route path="/chooseStyles" component={FormContainer} /&gt;
          &lt;Route path="/heightAndWeight" component={FormContainer} /&gt;
          &lt;Route path="/bodyShape" component={FormContainer} /&gt;
          &lt;/Switch&gt;
  );
  </code></pre>
  
  <p>I am trying to make my routes dynamic and loop through an array. But I am unable to make it work. For that, I am trying this code:</p>
  
  <pre><code>return (          
        &lt;Switch&gt;
           {a.map((b,i) =&gt; &lt;Route path={b[i].url} component={() =&gt; &lt;Global_Container name={a[0].path} /&gt;}  /&gt;)}
          &lt;Route path="/" component={() =&gt; &lt;HomePage /&gt;} exact /&gt;
          &lt;Route path="/chooseStyles" component={FormContainer} /&gt;
          &lt;Route path="/heightAndWeight" component={FormContainer} /&gt;
          &lt;Route path="/bodyShape" component={FormContainer} /&gt;
          &lt;/Switch&gt;
  );
  </code></pre>
  
  <p>Using code above I am getting errors. I have created a variable called a like this:</p>
  
  <pre><code>var a = [{"url":"/global","path":"maternityFit"},
              {"url":"/global1","path":"clothFit"}
          ]
  </code></pre>
  
  <p>My code works fine when I am using code like this:</p>
  
  <pre><code>  {a.map((b,i) =&gt; &lt;Route path={a[0].url} component={() =&gt; &lt;Global_Container name={a[0].path} /&gt;}  /&gt;)}
  </code></pre>
  
  <p>I don't know how to make it work in my case. I am declaring my var a in code block:</p>
  
  <pre><code>export default function App() {
    var a = [{"url":"/global","path":"maternityFit"},
              {"url":"/global1","path":"clothFit"}
          ]
  }
  </code></pre>