working on dynamic sidebar generation. trying to resolve 'Each child in a list should have a unique "key" prop'

Question

Error

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

Check the render method of SubmenuComponent. See https://reactjs.org/link/warning-keys for more information. at SubmenuComponent (webpack-internal:///./src/components/common/sidebar.js:231:22) at ul at nav at Menu (webpack-internal:///./node_modules/react-pro-sidebar/dist/index.es.js:376:23) at div at SidebarContent (webpack-internal:///./node_modules/react-pro-sidebar/dist/index.es.js:361:23) at div at div at div at ProSidebar (webpack-internal:///./node_modules/react-pro-sidebar/dist/index.es.js:322:23) at div at Sidebar (webpack-internal:///./src/components/common/sidebar.js:60:33) at Layout (webpack-internal:///./src/components/common/layout.js:19:62) at Auth (webpack-internal:///./lib/Auth.js:53:26) at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js?c19c:417:24) at MyApp (webpack-internal:///./src/pages/_app.js:96:28) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

import React, {useEffect, useState} from "react";
import {
    ProSidebar,
    Menu,
    MenuItem,
    SidebarHeader,
    SidebarFooter,
    SidebarContent, SubMenu,
} from "react-pro-sidebar";
import Image from "next/image";
import Link from 'next/link'
import {sidebarConfig} from "@/lib/sidebarConfig";
import uuid from 'react-uuid'

function Sidebar() {
    const [resData, setResData] = useState(sidebarConfig());

    
    
    return (
        <>
            <div className="wrapper">

                <ProSidebar
                    collapsed={isToggleSideBar}
                    width={250}
                    collapsedWidth="0px"
                >
                    <SidebarHeader>
                        <div style={{padding: "15px 24px", fontSize: "0px"}} >
                            <Image src="/logo.png" alt="home" width={90} height={90}/>
                        </div>
                    </SidebarHeader>
                    <SidebarContent>
                        <Menu>
                            {
                                resData?.map((item, index) => (
                                    <SubmenuComponent
                                        key={uuid()}
                                        item={item}
                                    />
                                ))
                            }
                        </Menu>
                    </SidebarContent>
                    
                </ProSidebar>

               
            </div>
        </>
    );


};

function SubmenuComponent({item}) {

    return (
        <>
            {
                item?.children?.length > 0 ?
                    <>
                        <SubMenu title={item.moduleName} key={uuid()}>

                            {item.children.map((items,index) => {

                                    return (
                                        // eslint-disable-next-line react/jsx-key
                                        <>
                                            {
                                                items?.children?.length > 0 ?
                                                    <>
                                                        <SubmenuComponent key={uuid()} item={items}/></>
                                                    :
                                                    <>
                                                        <MenuItem key={uuid()}>
                                                            <Link href={items.modulePath}>
                                                                {items.moduleName}
                                                            </Link>
                                                        </MenuItem>
                                                    </>
                                            }
                                        </>
                                    )
                                }
                            )}
                        </SubMenu>
                    </>
                    :
                    <MenuItem key={uuid()}>
                        <Link href={item.modulePath}>
                            {item.moduleName}
                        </Link>
                    </MenuItem>
            }
        </>
    )
}


export default Sidebar

here is my sidebar data

export function sidebarConfig() {
    return [
        {
            moduleName: 'Dashboard',
            modulePath: '#',
            children:[]
        },
        {
            moduleName: 'Companies',
            modulePath: '#',
            children:[
                {
                    moduleName: 'View Listing',
                    modulePath: '#',
                    children:[]
                },
                {
                    moduleName: 'company Types',
                    modulePath: '#',
                    children:[]
                }
            ]
        },
        {
            moduleName: 'Users',
            modulePath: '#',
            children:[]
        }

    ]
}

Answer 1

In your SubmenuComponent, you are returning a fragment for the items.map() function which you did not give a unique key prop for. To fix this, use the full React.Fragment component name instead.

<React.Fragment key={uuid()}>
    {/* your code here */}
</React.Fragment>