React Js: .map doesnt render anything

Question

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!

Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) — Emile Bergeron, Mar 02 '22 at 19:05

score 2 · Answer 1 · answered Mar 02 '22 at 18:57

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
    <>
  )
}

React Js: .map doesnt render anything

1 Answers1

Linked