`key` property in `Node` object

[jcestefan]

Hi! thanks for this great component!

I'm using a custom node and it's working great. Although, in web console it throws this warning.

It seems to be that Node doesn't have a unique key prop which is recommended to use in React apps. It would be great to have this key and be able to pass it to custom nodes.

Great work!

[minop1205]

@jcestefan Thanks for your report.

What is the version of @minoru/react-dnd-treeview you are using?

Also, can I see the code where the tree component is used? I would like to know what properties are being set.

[jcestefan]

@jcestefan Thanks for your report.

What is the version of @minoru/react-dnd-treeview you are using?

Version: tested in 1.5.9 and 1.5.10.

Also, can I see the code where the tree component is used? I would like to know what properties are being set.

Yes, sure:

function FolderTree(props) {
  const { folders, contentName, newFolderName, topLevelFolderId, parentProps } = props
  const onAction = (action, value) => parentProps[action] && parentProps[action](value)
  const isActive = folder => folder.id === foldersStore.currentFolder.id

  const topLevelFolder = new Folder({
    parent: 0,
    id: topLevelFolderId,
    name: contentName,
    icon: '',
    droppable: true,
    childFolders: folders
  })

  let allFolders = getFolders(folders, topLevelFolder)

  const newFolder = {
    parent: topLevelFolderId,
    name: newFolderName,
    icon: 'new-folder',
    droppable: false
  }
  allFolders = [topLevelFolder, ...allFolders, newFolder]

  const folderIdsToExpand = getAllFoldersParents(allFolders, parentProps.selectedFolderId, topLevelFolderId)

  return (
    <Tree
      tree={allFolders}
      rootId={0}
      initialOpen={folderIdsToExpand}
      render={(node, { depth, isOpen, onToggle }) => (
        <FolderSidebarTreeItem node={node}
          depth={depth}
          isOpen={isOpen}
          onToggle={onToggle}
          onClick={node === newFolder ? parentProps.onNewFolderClick : onAction('onClick', node)}
          onKeyDown={node === newFolder ? parentProps.onNewFolderKeyDown : onAction('onKeyDown', node)}
          onRenameClick={onAction('onRenameClick', node)}
          onRenameKeyDown={onAction('onRenameKeyDown', node)}
          onEmptyTrashClick={onAction('onEmptyTrashClick', node)}
          onEmptyTrashKeyDown={onAction('onEmptyTrashKeyDown', node)}
          onDeleteClick={onAction('onDeleteClick', node)}
          onDeleteKeyDown={onAction('onDeleteKeyDown', node)}
          onMessageDialogClick={onAction('onMessageDialogClick', node)}
          active={isActive(node)}
          key={node.id}
          selected={parentProps.selected && parentProps.selected(node)} />
      )}
    />
  )
}

As you can see, I added a key={node.id}, but it doesn't do anything.

[minop1205]

@jcestefan thank you for the detail information.

Since every node must have a unique id, the newFolder below must also be given an id property.

  const newFolder = {
    id: xxx, // <-- add unique key
    parent: topLevelFolderId,
    name: newFolderName,
    icon: 'new-folder',
    dropable: false
  }

Looking at the code you provided, it looks like

 allFolders = [topLevelFolder, ...allFolders, newFolder]

In this part of the code, a newFolder with no id is added, which causes an error in the console.

[jcestefan]

@jcestefan thank you for the detail information.

Since every node must have a unique id, the newFolder below must also be given an id property.

  const newFolder = {
    id: xxx, // <-- add unique key
    parent: topLevelFolderId,
    name: newFolderName,
    icon: 'new-folder',
    dropable: false
  }

Looking at the code you provided, it looks like

 allFolders = [topLevelFolder, ...allFolders, newFolder]

In this part of the code, a newFolder with no id is added, which causes an error in the console.

Oh my, I didn't check that 🤦‍♂️

Thanks a lot!