ReactJs, TypeScript TypeError: menuItems.map is not a function, error on map

Question

Hello I have the following logic of useState and map an array to display only one dropdownItems at a time

here i have my array with tags ( menu name, links ( to router), icon( menu icon), if have dropdown Items ( dropdown items))

my MenuTags:

export interface IDropdownItems {
  Name: string;
  Link: string;
}
export interface ITag {
  Name: string;
  Link: string;
  Icon: IconType;
  DropdownItems: IDropdownItems[] | null;
  Active: boolean;
}

export const SideBarTags: ITag[] = [
  {
    Name: 'Tutoriais',
    Link: '../tutorials',
    Icon: GoBook,
    DropdownItems: null,
    Active: false,
  },
  {
    Name: 'Avisos',
    Link: '../news',
    Icon: GoAlert,
    DropdownItems: null,
    Active: false,
  },
  {
    Name: 'Serviços',
    Link: '../services',
    Icon: GoRocket,
    Active: false,
    DropdownItems: [
      { Name: 'Elo Boost', Link: '/eloBost' },
      { Name: 'Duo Boost', Link: '/duoBoost' },
      { Name: 'MD10', Link: '/eloBost' },
      { Name: 'Coaching', Link: '/duoBoost' },
      { Name: 'Vitóriais', Link: '/duoBoost' },
    ],
  },
  {
    Name: 'Carteira',
    Link: '../cartcredit',
    Icon: FaCoins,
    Active: false,
    DropdownItems: [
      { Name: 'Histórico', Link: '/history' },
      { Name: 'Adicionar Crédito', Link: '/add' },
    ],
  },
];

my MenuTag ( useState and map here ):

const MenuTags: React.FC<MenuTags> = ({ sideisOpen }) => {
  const [menuItems, setMenuItems] = useState(SideBarTags);
  return (
    <MenuList open={sideisOpen}>
      {menuItems.map((item, index) => (
        <MenuTagsItems
          key={item.Name}
          Name={item.Name}
          Active={item.Active}
          DropdownItems={item.DropdownItems}
          Icon={item.Icon}
          Link={item.Link}
          sideisOpened={sideisOpen}
          tagFunction={setMenuItems}
        />
      ))}
    </MenuList>
  );
};

my MenuTagsItems

const MenuTagsItems: React.FC<ITag & IMenuTagsItems> = ({
  sideisOpened,
  Name,
  Active,
  DropdownItems,
  Icon,
  Link,
  tagFunction,
}) => {
  const clickHandler = (value) => () => {
    console.log(value);
    tagFunction((items) =>
      items.map((item) => ({
        ...item,
        Active: item.Name === value,
      }))
    );
  };
  return (
    <ListItem>
      <ListWrap
        open={sideisOpened}
        active={Active}
        onClick={() => {
          tagFunction(Name);
        }}
      >
        <a>
          <Icon size={18} />
          <span className="li-name">{Name}</span>
        </a>
      </ListWrap>
      {DropdownItems && (
        <Drop
          active={Active}
          dropItems={DropdownItems}
          Icon={Icon}
          isOpen={sideisOpened}
          setVisible={tagFunction}
        />
      )}
    </ListItem>
  );
};

and if menu tag have dropdown items my DropDown:

const Drop: React.FC<IDrop> = ({
  active,
  isOpen,
  dropItems,
  setVisible,
  Icon,
}) => {
  return (
    <OpenedStyled active={active}>
      {dropItems.map((item) => (
        <li className="li-open" key={item.Name}>
          <Icon />
          <a>{item.Name}</a>
        </li>
      ))}
    </OpenedStyled>
  );
};

sorry i forgot error

i got this error: Uncaught TypeError: menuItems.map is not a function here:

<MenuList open={sideisOpen}>
  {menuItems.map((item, index) => (
    <MenuTagsItems
      key={item.Name}
      Name={item.Name}
      Active={item.Active}
      DropdownItems={item.DropdownItems}
      Icon={item.Icon}
      Link={item.Link}
      sideisOpened={sideisOpen}
      tagFunction={setMenuItems}
    />
  ))}
</MenuList>

Answer 1

It looks like a problem is here:

<ListWrap
    open={sideisOpened}
    active={Active}
    onClick={() => {
       tagFunction(Name);
    }}
>

More specific, you are calling tagFunction (which is setMenuItems ) in onClick handler with a Name parameter that is not an array, and you are setting it for menuItems state. Since it's not an array it doesn't have map, so there is an error.

Similar potential error you might have here:

<Drop
   active={Active}
   dropItems={DropdownItems}
   Icon={Icon}
   isOpen={sideisOpened}
   setVisible={tagFunction}
/>

with setVisible param, but I see it's not used in a Component yet.