I have this Array
const Routes = [
{
name: "Google Marketing Platform",
roles: ['Devs', 'Adops', ' Planning'],
module: "",
icon: '',
subMenu: [
{
name: "Campaign Manager",
roles: ['Devs', 'Adops', ' Planning'],
module: "GMP",
icon: '',
subMenu: [
{
name: "Campaign Builder",
roles: ['Devs', 'Adops', ' Planning'],
module: "webcb",
icon: '',
subMenu: []
},
{
name: "Reporting",
roles: ['Devs', 'Adops', ' Planning'],
module: "cmReporting",
icon: '',
subMenu: []
}
]
}
]
and i try to render that array on this code
const NavBar = () => {
const [rutas, setRutas] = useState(Routes);
return (
<div className={`navBar__menu ${isNavOpen} `}>
<ul className='navBar__menu-list'>
{rutas.map((data) => {<>
<Link to={`/${data.module}`} className={"navBar__menu-list-subItems"}>
<p className={"navBar__menu-list-items-text"} >{data.name}</p>
</Link>
</>
{
data.subMenu.map((data) => {
<Link to={`/${data.module}`} className={"navBar__menu-list-subItems"}>
<p className={"navBar__menu-list-items-text"} >{data.name}</p>
</Link>
}
)
}
})}
</ul>
</div>
)
}
Elements are not rendering and idk why, becouse i dont have any error on console and i tried with another array and doesnt work either, thanks you for your help!
You're not returning anything from map. You can either change the {} to () like so
rutas.map((data) => (
<>
...everything else
<>
)
or you can use an explicit return
rutas.map((data) => {
return (
<>
...everything else
<>
)
}