2

I am using BlueprintJS UI components for my ReactJS webapp. I want to get rid of the warning when using the Tree component to render a file explorer:

Each child in an array or iterator should have a unique "key" prop. Check the render method of "Tree"

In the documentation of the Tree component I can find a key attribute which might be the thing I am looking for, but I can't get the warning away.

node: [ { hasCaret: true, iconName: "folder-close", label: "Folder 0", key: '1e' } ]

Eveb this simple structure for the tree gives the warning to me. Any suggestions?

Freshchris
  • 1,211
  • 4
  • 17
  • 34

1 Answers1

2

I'm assuming node is being passed into the Tree's required contents prop. If you look at the ITreeNodeInterface, you'll see that there are number of required fields that your object is missing. You have to have the following:

  • depth
  • id
  • label
  • path (questionable if this is truly required though: see this ticket)

You seem to be missing depth, id, and path. I'm not sure if path is truly required, but for starters can you try adding depth: 0 and id: 1e to your object? You can probably get rid of key since that's optional.

As an aside, that warning is not so innocuous. It can often result in mysterious React behavior because it's not able to figure out which components actually need to be updated.

Michael Wu
  • 1,177
  • 1
  • 13
  • 34