Reactjs Question posted in
The new location for the React Documentation can be found here.

What's wrong with this reactjs rendering?

I tried to change the key for any other random information and the error persists, I’m already going crazy with this error

"use client"
import Image from "next/image";
import {Lock, KeySquare, BoxIcon, Mailbox, Pencil, Plus, Settings, Trash, ListTodo } from "lucide-react"
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubItem,
  SidebarMenuSubButton,


} from "@/components/ui/sidebar"
import Link from "next/link";
import {usePathname} from "next/navigation";
// Menu items.
const items = [
  {
    id:'123aslk',
    group: '1',
    title: "Sistema CEP",
    url: "../pesquisacep",
    icon: Mailbox,
  },
  {
    id:'3498dddd',
    group: '2',
    title: "Cumprimentos",
    url: "#",
    icon: ListTodo,
    subs: [
      {
        sub:'2-1',
        title: "Alvarás",
        url: "#",
        icon: KeySquare
      },
      {
        sub: '2-2',
        title: "Mandados",
        url: "#",
        icon: Lock
      }
    ],
  },
  {
    id:'lkgj3434',
    group: '3',
    title: "Configurações",
    url: "#",
    icon: Settings,
  }
]

export function AppSidebar() {
  const pathname = usePathname();
  console.log(pathname)
  return (
    <Sidebar className="">
      <SidebarHeader className="">
        <Link href="/" className="flex items-center">
          <Image src="/logo.svg" alt="logo" width="40" height="40"></Image>
          <span className="font-bold text-slate-200">System</span>
        </Link>

      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Sistema</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              {items.map((item) => (
                <SidebarMenuItem key={item.group}>
                  <SidebarMenuButton asChild variant="outline">
                    <Link href={item.url}>
                      <item.icon />
                      <span>{item.title}</span>
                    </Link>
                  </SidebarMenuButton>
                  {item.subs && (
                    <SidebarMenuSub key={item.id}>
                      
                      {item.subs.map((item2) => (
                        
                        <SidebarMenuSubItem>
                          <SidebarMenuSubButton key={item2.sub} asChild >
                            <Link href={item2.url} className="flex gap-1 items-center" >
                              <item2.icon className="h-4 w-4" />
                              <span>{item2.title}</span>
                            </Link>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  )}
                </SidebarMenuItem>


              ))}
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  )
}

the error warning in the brownser:

Each child in a list should have a unique "key" prop.

Check the render method of AppSidebar. See https://react.dev/link/warning-keys for more information.

what is happening? please?

I tried to change the key for any other random information and the error persists

Tags:

2

Answers


  1. 0

    You need to add the key on direct child SidebarMenuSubItem

                       {item.subs && (
                    <SidebarMenuSub key={item.id}>
                      
                      {item.subs.map((item2) => (
                        
                        <SidebarMenuSubItem key={item2.sub}> //Add the key here
                          <SidebarMenuSubButton asChild >
                            <Link href={item2.url} className="flex gap-1 items-center" >
                              <item2.icon className="h-4 w-4" />
                              <span>{item2.title}</span>
                            </Link>
                          </SidebarMenuSubButton>
                        </SidebarMenuSubItem>
                      ))}
                    </SidebarMenuSub>
                  )}
    Login or Signup to reply.
  2. 0

    This is a common and normal error encountered by any dev in the beginning.

    The error Each child in a list should have a unique "key" prop occurs because React requires that all elements in an array have a unique key prop to optimize rendering efficiently.

    In your code, while you have provided key props to some of the elements (SidebarMenuItem, SidebarMenuSubButton), there are still areas where key is either missing or incorrectly applied like in SidebarMenuSubItem.

    If you need more ideas working with client components in React, here is the documentation link for rendering lists.

    {item.subs.map((item2) => (
    <SidebarMenuSubItem> // <-- No "key" prop here
      <SidebarMenuSubButton key={item2.sub} asChild>
        <Link href={item2.url} className="flex gap-1 items-center">
          <item2.icon className="h-4 w-4" />
          <span>{item2.title}</span>
        </Link>
      </SidebarMenuSubButton>
    </SidebarMenuSubItem>
))}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search