nextui: [BUG] - Typescript error with DropdownItem

NextUI Version

2.1.13

Describe the bug

Hello, I have a type issue when using the Dropdown component, this is the code triggering the ts error:

<DropdownMenu aria-label="Profile Actions" variant="flat">
    { menuItems.map((entry) => (
        <DropdownItem key={entry.link} showDivider={entry.divider}>
            {entry.name}
        </DropdownItem>
    ))}
    <DropdownItem key="custom">Test123</DropdownItem>
</DropdownMenu>

The error is: Type 'Element[]' is not assignable to type 'CollectionElement<object>'. The code runs fine and the result is as expected, that is a list of DropdownItems followed by the non-iterated “Test123” item, but the error (that I couldn’t suppress) prevents me from building the app for production.

If I wrap it with a fragment <></>, which makes the TS error disappear, this time the error is at runtime and becomes TypeError: Cannot convert a Symbol value to a string.

Any idea on how to make it work? I have custom element at the bottom of this dropdown, that doesn’t match the structure of the iterated elements.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

I’m using Typescript 5.1.6 and NextJS 13.4.13

Expected behavior

There should be either no runtime or linter errors.

Screenshots or Videos

No response

Operating System Version

Windows with Linux Subsystem 2.0 (Debian LTS)

Browser

Chrome

About this issue

Original URL
State: open
Created 9 months ago
Reactions: 7
Comments: 15 (3 by maintainers)

Most upvoted comments

Hey ! I see you closed this in 2.2.0 @jrgarciadev ?

I’m still having this issue with the following in 2.2.1:

<Dropdown placement="bottom-end">
  <DropdownMenu aria-label="Profile Actions" variant="flat">
    {session.user?.isAdmin && (
      <DropdownSection title="Admin" showDivider>
        <DropdownItem key="prisma">Whatever</DropdownItem>
      </DropdownSection>
    )}
  </DropdownMenu>
</Dropdown>

Same symptoms, ts-error, then runtime error if wrapping it inside a fragment 😕

xavier-villelegier on Nov 4, 2023

Hey, I’m struggling with a similar issue, although in my case it’s with the DropdownSection:

<DropdownSection showDivider key={"notifications"} items={notifications}>
  {(item: any) => (
    <DropdownItem
      key={item.id} 
      onPress={notificationPressHandler}
      className={styles.notification__wrapper}
    >
      <span className={styles.notification__topic}>{item.topic}</span>
      <p className={styles.notification__content}>{item.content}</p>
    </DropdownItem>
  )}
</DropdownSection>

This is only a TypeScript error, I’ll be using ts-ignore for now to avoid it. Components render fine.

louisescher on Nov 19, 2023

Option number 2, which is probably the best one:

 <DropdownMenu aria-label="Profile Actions" variant="flat">
   <DropdownSection>
      { menuItems.map((entry) => (
          <DropdownItem key={entry.link} showDivider={entry.divider}>
              {entry.name}
          </DropdownItem>
      ))}
    </DropdownSection>
    <DropdownItem key="custom">Test123</DropdownItem>
</DropdownMenu>

The only downside here is the aria-label warning, because It’s a titleless section.

Not sure if I should close the issue though. I don’t think the errors I encountered are expected.

matteo-pkxp on Sep 25, 2023

I found a not-so-elegant solution to ignore the TS error:

<DropdownMenu aria-label="Profile Actions" variant="flat">
{[
  // @ts-ignore
  menuItems.map((entry) => (
      <DropdownItem key={entry.link}>
          {entry.name}
      </DropdownItem>
  )),
  <DropdownItem key="custom">Test123</DropdownItem>,
]}
</DropdownMenu>

This suppresses the TS error, renders the Dropdown as expected and throws no runtime errors, but I’m sure there’s a better solution.

matteo-pkxp on Sep 25, 2023