peterportal-client icon indicating copy to clipboard operation
peterportal-client copied to clipboard

Fix react key attributes to be unique

Open js0mmer opened this issue 1 year ago • 0 comments

In a lot of our code, we render arrays of components. React requires components rendered in an array to have a key attribute. The key attribute should be unique to the component because React uses it to match states for the components. In many instances, we use an item index in the key to differentiate them. This is bad practice since the index is not unique to the component, and if component orders were to change (e.g. sorting a list of reviews) then their states/data would be mismatched. You can read more about keys on the react documentation. Additional documentation available in our wiki.

Here's a screenshot of a grep search for key={. Any of them that use an index in the key should be changed to something unique to the component e.g. a professor name or ucinetid for a list of professors. image

js0mmer avatar May 27 '23 04:05 js0mmer