React implement routes from array programitically - reactjs

Question

I have a file called routes.js there I import components and create a routes array.
routes.js
import Country from '../src/components/country/Country';
import Countries from '../src/components/country/CountriesList';
import User from '../src/components/user/User';
import UsersList from '../src/components/user/UsersList';
export const routes = [
{
name: 'USER',
children: [
{
name: 'Create',
path: '/user-create',
component: User,
// isHidden: true,
},
{
name: 'Update',
path: '/update-user',
isHidden: true,
component: User,
},
{
name: 'View',
path: '/users',
component: UsersList,
// isHidden: true,
},
],
},
{
name: 'COUNTRY',
children: [
{
name: 'Create',
path: '/country',
component: Country,
},
{
name: 'View',
path: '/countries',
component: Countries,
},
],
},
],
},
];
Then, I want to import that routes array and render routes programmatically.
I did this.
{routes.map(
{children}=>
children.forEach({component,path} => <Route component={component} exact path={path}/>)
)}
This gives me a syntax error.
I think this is because I am trying to render with a ForEach loop.
How do I fix this syntax problem?

Answer 1

You can use the Array#flatMap and Array#map function which will return an array of components which React can render.
{routes.flatMap(items => items.children).map(({ component, path }) => <Route component={component} exact path={path}/>)}
You were also missing some parens () around the curly braces which caused the Syntax error.
E.g. in the following part, you are trying to destructure the object containing the children property. However, you will need to wrap the destructing syntax with parens if you use this in an arrow functions.
{routes.map({children} =>