Question 224827 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – i set the key in the map but unique key error still exist

<MenuList width={'148px'} >
        { Object.entries(userRoleMenu[UserRole]).map((item, index) => <>
          {item[0]==='fpv?
          <MenuItem _hover={{backgroundColor:'gray.50'}} key={item[0]} onClick={handleMenuClick(item)}>
          </MenuItem>
          :
          <MenuItem _hover={{backgroundColor:'gray.50'}} key={item[0]} onClick={handleMenuClick(item)}>{item[0]}</MenuItem>
          }
          </>)
        }
      </MenuList>

error:
UserProfileThumbnailMenuList.tsx:65 Warning: Each child in a list should have a unique "key" prop.

Check the render method of UserProfileThumbnailMenuList. See https://reactjs.org/link/warning-keys for more information.
at UserProfileThumbnailMenuList

code is in UserProfileThumbnailMenuList

i dont know why unique key error still exist

Tags:

3

Answers


  1. 0 
     <MenuList width={'148px'}>
  {Object.entries(userRoleMenu[UserRole]).map((item, index) => (
    <React.Fragment key={item[0]}>
      {item[0] === 'fpv' ? (
        <MenuItem _hover={{ backgroundColor: 'gray.50' }} onClick={() => handleMenuClick(item)}>
          {/* Add content for the fpv case here */}
        </MenuItem>
      ) : (
        <MenuItem _hover={{ backgroundColor: 'gray.50' }} onClick={() => handleMenuClick(item)}>
          {item[0]}
        </MenuItem>
      )}
    </React.Fragment>
  ))}
</MenuList>

    I’ve added the correct key prop to the React.Fragment, and I’ve also fixed the syntax error in the conditional check by changing {item[0]===’fpv? to {item[0]===’fpv’ ?. Make sure to replace the placeholder comment with the actual content for the fpv case inside the MenuItem.

    Login or Signup to reply.
  2. 0

    This error is occur because you use <> ... </> react fragment in this way which react don’t apply key on it.

    You should do this instead:

    import { Fragment } from "react";
.
.
.


<MenuList width={'148px'} >
        { Object.entries(userRoleMenu[UserRole]).map((item, index) => 
<Fragment key={index}>
          {item[0]==='fpv?
          <MenuItem _hover={{backgroundColor:'gray.50'}} onClick={handleMenuClick(item)}>
          </MenuItem>
          :
          <MenuItem _hover={{backgroundColor:'gray.50'}} onClick={handleMenuClick(item)}>{item[0]}</MenuItem>
          }
          </Fragment>)
        }
      </MenuList>
    Login or Signup to reply.
  3. 0

    In your case, your key is not unique, since you .map and set the same key for every element created.

    You need to change key={item[0]} to key={index}, or if your item element is an object and has a unique identifier, like an id, you could do something like key={item.id}

    Also, you don’t need to specify the element and the index item[0], while the item contains the exactly element index of the array returned from Object.entries(userRoleMenu[UserRole]) since map take care of it.

    Read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

    You should make the following changes:

    <MenuList width={"148px"}>
  {Object.entries(userRoleMenu[UserRole]).map((item, index) =>
    item === "fpv" ? (
      <MenuItem
        _hover={{ backgroundColor: "gray.50" }}
        key={index}
        onClick={handleMenuClick(item)}
      />
    ) : (
      <MenuItem key={index} onClick={handleMenuClick(item)}>
        {item}
      </MenuItem>
    )
  )}
</MenuList>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search