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 — Emile Bergeron
– Emile Bergeron, Commented Mar 2, 2022 at 19:05

larz · Accepted Answer · 2022-03-02 18:57:01Z

2

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

answered Mar 2, 2022 at 18:57

larz

5,7662 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Js: .map doesnt render anything

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related