Make sure the breadcrumb has unique keys #458
Conversation
src/files-breadcrumbs.tsx
Outdated
| @@ -105,12 +105,12 @@ export function FilesBreadcrumbs({ path, showHidden, setShowHidden }: { path: st | |||
| />} | |||
| {!editMode && fullPath.map((dir, i) => { | |||
| return ( | |||
| <React.Fragment key={dir || "/"}> | |||
| <React.Fragment key={`${dir}-${i}`}> | |||
There was a problem hiding this comment.
i must not be part of a key. The point of keys are to uniquely identify the content/identity of an entry independently from its position (otherwise React wouldn't need keys in the first place), to know which rows have to be re-rendered. I suggest to build up the key from the full path during the iteration, like "usr", "usr/share", "usr/share/doc", etc. An external accumulator variable should work, or a slice of path.
It may work fine in this specific case, but it's a very dangerous practice, so please don't learn it 😁
There was a problem hiding this comment.
Sure, it's a bit ugly to have a var defined outside but I don't see a nicer way to do it.
There was a problem hiding this comment.
And reworked to use fullPath.
jelly
force-pushed
the
duplicate-key-breadcrumb
branch
from
085431b
to
8ebe825
Compare
jelly
force-pushed
the
duplicate-key-breadcrumb
branch
from
8ebe825
to
b6c8a8e
Compare
src/files-breadcrumbs.tsx
Outdated
| <Button | ||
| isDisabled={i === path.length - 1} | ||
| icon={i === 0 ? <HddIcon /> : null} | ||
| variant="link" onClick={() => { navigate(i + 1) }} | ||
| key={dir} className="breadcrumb-button" | ||
| key={`${dir}-${i}`} className="breadcrumb-button" |
There was a problem hiding this comment.
This still uses i. But why does hthis need a key at all? It's not a dynamic list inside the fragment.
A path can have the same directory so make sure the keys are actually unique.
jelly
force-pushed
the
duplicate-key-breadcrumb
branch
from
b6c8a8e
to
dd79521
Compare
A path can have the same directory so make sure the keys are actually unique.