Encountered two children with the same key - item duplication

user4Ded 0
Viewed 26

i have multi language page in nextjs. i want to change language by clicking dropdown.

const language = [
  {
    locales: 'fa',
    name: 'فارسی',
    country_code: 'ir'
  },
  {
    locales: 'en',
    name: 'English',
    country_code: 'gb'
  },
  {
    locales: 'ar',
    name: 'العربیه',
    country_code: 'sa'
  }
]

let router = useRouter()

return (
    <>
     
<div className="dropdown">
<button className="btn btn-link color-link  dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<GlobeIcon />
</button>
  <ul className="dropdown-menu">

      {router.locales.map((locale) =>(
            <>
          {language.map((code) =>(
          <li key={locale}>
            <Link href={router.asPath} locale={locale}>
              <span className={`flag-icon flag-icon-${code.country_code} mx-5`}>
                <a>
                  {code.name}
                </a>
            </span>
          </Link>
      </li>))}</>
  ))} 
  </ul>
</div>
</>

i put a map on another map. now it duplicated 3 times. i should have 3 language but because it duplicated now it shows nine.

i think problem is with my jsx code(map part). i think it's because, first i map router and it gives me three items. second time i map language and it will loop each router another time. because of this it duplicated 9 times. how can i fix it

unique-key duplicates next.js reactjs
1 Answers

React requires a unique key when mapping through an array. This helps react optimize performance and track where the component is at the component tree. In your case you should write a unique id or any other unique property in your language array.


    const language = [
      {
        id: 1,
        locales: 'fa',
        name: 'فارسی',
        country_code: 'ir'
      },
      {
        id: 2,
        locales: 'en',
        name: 'English',
        country_code: 'gb'
      },
      {
        id: 3,
        locales: 'ar',
        name: 'العربیه',
        country_code: 'sa'
      }
    ]

Now you can map through this array like the following:

{language.map((code) =>(
  <li key={code.id}>
    <Link href={router.asPath} locale={locale}>
       <span className={`flag-icon flag-icon-${code.country_code} mx-5`}>
           <a>
            {code.name}
           </a>
         </span>
     </Link>
  </li>))}

Also why are looping though router? and what are you trying to do by looping though router?

UPDATE

Update the loop like the following:

{router.locales.map((locale) =>
   language.map((code) =>(
          <li key={locale}>
            <Link href={router.asPath} locale={locale}>
              <span className={`flag-icon flag-icon-${code.country_code} mx-5`}>
                <a>
                  {code.name}
                </a>
            </span>
          </Link>
      </li>
   ))
  )}

If this doesn't work, then is it possible for you to share your full code, or can you make a reproduction of this problem in stackblitz or codesandbox

Pranta0
Related