NextUI v2 warning - how to fix Warning: A props object containing a "key" prop is being spread into JSX?

Question

I'm building a website with Next.js V13 and React V18, using NextUI v2 components. when clicking the dropdown trigger (a button in this case) I get a warning that: "Warning: A props object containing a "key" prop is being spread into JSX" despite having a key defined in DropdownItem as can be seen in the Navbar code below:

<NavbarContent justify="end">
    <Dropdown>
        <DropdownTrigger>

        <Chip
            as="button"
            size="lg"
            className="fit-content"
            startContent={<Avatar icon={<AvatarIcon />} size="sm" />}
            variant="bordered"
        >
            {/*we know local storage exists by this stage*/}
            {localStorage?.getItem("fname")}
        </Chip>
        </DropdownTrigger>
        <DropdownMenu aria-label="User Actions">
            {/*eslint-disable*/}
            <DropdownItem key="logout" color="danger">Sign out</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</NavbarContent>

I tried to fix it by trying the stable version of NextUI (v1) since it might be a problem in the library itself, but no luck. Adding keys to different parent components didn't help either.

NextUI v2 warning - how to fix Warning: A props object containing a "key" prop is being spread into JSX?

0 Answers0