search

codyswanner / Meme-Cataloger

Learning ReactJS and Django while building something that I want to use
1 stars 1 forks source link

Duplicate Keys on new Tag creation #72

Closed codyswanner closed 3 months ago

codyswanner commented 3 months ago

On new tag creation (using TagPopperContent), React throws a warning that there are components with duplicate keys. This is because the tag creation process creates a temporary version of the tag to be applied immediately on the image while the backend creates a permanent version of this tag to be added to the list of tags for filtering or other images. This problem is resolved by closing and re-opening the tag management popper, which switches this tag to use the new permanent version; this is still a warning from React, however.

Opening this issue as a question for now to consider is it worth making code changes to avoid this warning, or if this is small enough that it's not worth making changes. If it is worth changes, what options are there to mitigate this issue?

codyswanner commented 3 months ago

An option for mitigating this -- this issue is caused by tags using their names as keys, switching to using unique IDs (that all tags have anyways and that is unique between temporary and permanent versions of tags) would solve this. This might be a good idea to implement anyways, since someone attempting to create two tags with identical names would also cause this issue, and that would create a lot more warnings and would not be resolved with a page/component reload.

codyswanner commented 3 months ago

I'm convinced, yes this should be changed. Changing this issue to a bug issue to do this work off of.

codyswanner commented 3 months ago

Added a key prop to the renderOption of the Autocomplete that resolves this issue. However, this brings up another issue... #73