-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[dashboard] Support multiple "Recent" projects with the same title #4312
Conversation
@@ -35,7 +35,7 @@ export function StartWorkspaceModal(p: StartWorkspaceModalProps) { | |||
useEffect(() => setSelection(computeSelection()), [p.recent, p.selected]); | |||
|
|||
const list = (selection === 'Recent' ? p.recent : p.examples).map(e => | |||
<a key={e.title} href={e.startUrl} className="rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-800 flex p-4 my-1"> | |||
<a key={e.startUrl} href={e.startUrl} className="rounded-xl group hover:bg-gray-100 dark:hover:bg-gray-800 flex p-4 my-1"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think there is no guarantee for startUrl to be unique.
In such cases it's easy to add the index of element provided by map
, e.g.
map((e, index) => {
... key={`element-${index}-` + e.startUrl}
})
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, actually looking at the effect and L.37, it'd make sense to include selection
into the key as well. Sorry for missing that, @jankeromnes.
BTW, could you please make https://gitlab.com/jankeromnes/gitpod-staging-prebuilds public to make it easier to test.
f6f2e2c
to
e0367b9
Compare
e0367b9
to
fda71be
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It works as advertised! Thanks @jankeromnes
Just a note on #4312 (comment), I've no idea how to reproduce it actually. This is good so far 👍🏻
Thanks for fixing this @jankeromnes! 💯 |
Fixes this:
Explanation
I believe using the same
key
on multiple elements in a list breaks React. This PR attempts to make the key unique.How to test
Expected: