React router loop and return

Question

I am trying to return my routes from an array using loop. I have an app.js file where my code is like this:

  return (          
      <Switch>
        <Route path="/" component={() => <HomePage />} exact />
        <Route path="/chooseStyles" component={FormContainer} />
        <Route path="/heightAndWeight" component={FormContainer} />
        <Route path="/bodyShape" component={FormContainer} />
        </Switch>
);

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:

return (          
      <Switch>
         {a.map((b,i) => <Route path={b[i].url} component={() => <Global_Container name={a[0].path} />}  />)}
        <Route path="/" component={() => <HomePage />} exact />
        <Route path="/chooseStyles" component={FormContainer} />
        <Route path="/heightAndWeight" component={FormContainer} />
        <Route path="/bodyShape" component={FormContainer} />
        </Switch>
);

Using code above I am getting errors. I have created a variable called a like this:

var a = [{"url":"/global","path":"maternityFit"},
            {"url":"/global1","path":"clothFit"}
        ]

My code works fine when I am using code like this:

  {a.map((b,i) => <Route path={a[0].url} component={() => <Global_Container name={a[0].path} />}  />)}

I don't know how to make it work in my case. I am declaring my var a in code block:

export default function App() {
  var a = [{"url":"/global","path":"maternityFit"},
            {"url":"/global1","path":"clothFit"}
        ]
}

Without knowing the error I can't give an answer, but I can point out that in the breaking example you are still using the 0 index for the name prop. — Brian Thompson
– Brian Thompson, Commented Mar 17, 2020 at 18:27
What is "it"? Can you update the question to include the text of the error message? — Henry
– Henry, Commented Mar 17, 2020 at 18:40
{"url":"/global","path":"maternityFit"}, b[i].url is unable to detect url any way when I removed b[i].url to b.url it is working. But I am unable to understand why — Nilay Singh
– Nilay Singh, Commented Mar 17, 2020 at 18:42

Brian Thompson · Accepted Answer · 2020-03-17 18:56:04Z

The map function isn't being used correctly. b has the current value of the array, You shouldn't be doing b.[index]. b is already the result of doing a[index]; just use it instead. Documentation on map.

Instead you should be doing this:

{a.map((b) => (
  <Route path={b.url} component={() => <Global_Container name={b.path} />}  />
  //           ^ b is the object not array                     ^ Use b here instead of a
))}

To further visualize what is happening consider the following:

var myArray = [{ val1: 'foo' }, { val1: 'bar' }]

myArray.map((obj, index) => {
  console.log('myArray: ', myArray); // Still the full array
  console.log('obj: ', obj); // The current value in the loop
  console.log('index: ', index); // The current index in the loop
});

So the issue was you were tying to use obj as if it were myArray. But instead you can skip the extra characters of typing out myArray[index] and just use obj.

Collectives™ on Stack Overflow

React router loop and return

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related