I meet with this problem

<Menu
        mode='horizontal'
        items={
          menuState &&
          menuState?.map((valueMenus, index) => {
            const key = index   1;
            const items = valueMenus.menusInferiores;

            return {
              key,
              label: (
                <div>
                  {valueMenus.menu} <DownOutlined />
                </div>),
              children: items.map(item => {
               `your text` return {
                  label: <NavLink to={item.key}>{labelName}</NavLink>,
                  key: item.key
                };
              })
            };
          })
        }
      />

result of console:

but, i did a little change like this

`children: items.map(item => {
  const labelName = item.label;
  //DONE:Cambiar la ruta quemada por la ruta que nos envian del bk
   item.label = (
     <NavLink to={item.key}>{labelName}</NavLink>
   );
  return {
     label: <div>{labelName}</div>,
                  key: item.key
                };
              })`

no error and it's works :D, now my question is ¿How it's works?`

CodePudding user response：

you just wrraped your <NavLink/> component with a <div> this is what you did and this is working because <a> is no longer a descendant of <a> as mentioned is the error note that <NavLink/> is in fact an <a> element so instead of :

<a>
<a></a>
</a>

now you have :

<a>
<div><a></a></div>
</a>

CodePudding user response：

The error says that you cannot nest an "a" tag inside of another "a" tag. The error is gone, because "lablelName" variable that you're returning is not a NavLink (not an "a" tag).

item.label = (
     <NavLink to={item.key}>{labelName}</NavLink>
   );

This part of code does nothing, you're returning a div, not a NavLink