Avoid using an element's index as the
key prop JS-0437Do not use Array index in keys
197 <div key={`${item.id}-${par}`}>
198 <Checkbox.Group {...form.getInputProps('communityFocus')} inputContainer={wrapInStack}>
199 <Checkbox
200 key={`${item.id}-${par}-item`}201 label={`${item.icon} ${t(item.tsKey, { ns: item.tsNs })}`}
202 value={item.id}
203 />Do not use Array index in keys
194 }
195
196 return (
197 <div key={`${item.id}-${par}`}>198 <Checkbox.Group {...form.getInputProps('communityFocus')} inputContainer={wrapInStack}>
199 <Checkbox
200 key={`${item.id}-${par}-item`}Do not use Array index in keys
182 <Checkbox.Group {...form.getInputProps('communityFocus')} inputContainer={wrapInStack}>
183 {item.children.map((child, i) => (
184 <Checkbox
185 key={`${child.id}-${par}-${i}`}186 label={t(child.tsKey, { ns: child.tsNs })}
187 pl={40}
188 value={child.id}Do not use Array index in keys
182 <Checkbox.Group {...form.getInputProps('communityFocus')} inputContainer={wrapInStack}>
183 {item.children.map((child, i) => (
184 <Checkbox
185 key={`${child.id}-${par}-${i}`}186 label={t(child.tsKey, { ns: child.tsNs })}
187 pl={40}
188 value={child.id}Do not use Array index in keys
171 const indeterminate = selectedChildren(item.id)
172 const checked = selectedChildren(item.id, true)
173 return (
174 <div key={`${item.id}-${par}`}>175 <Checkbox
176 label={`${item.icon} ${t(item.tsKey, { ns: item.tsNs })}`}
177 indeterminate={indeterminate}
Description
When rendering a list of items in React, it is necessary to pass a "key" prop.
This key is used by React to identify which items have changed, are added, or are removed and should be stable.
It is not recommended to use the index of an element as key because it doesn't uniquely identify the element.
When elements are added/removed from an array, the index of an element may change, which will result in unnecessary re-renders.
When the array is sorted, or an element is added to the beginning of the array, the indices will be changed even though the element representing an index may stay the same. This too can result in unnecessary renders.
Bad Practice
cards.map((cardData, index) => (
<Card key={`key-is-${index}`} data={cardData}/>
));
buttonNames.map((btnText, index) => (
<Button key={index} text={btnText}/>
));
things.forEach((thing, index) => {
otherThings.push(<Hello key={index} />);
});
Recommended
cards.map((cardData) => (
<Card key={cardData.id} data={cardData} />
));
buttonData.forEach((btnData) => {
buttons.push(<Hello key={btnData.id} text={btnData.text} />);
});