key
prop JS-0437158 }
159 const pwChecks = passwordRequirements.map((requirement, index) => (
160 <PasswordRequirement
161 key={index}162 label={requirement.label}
163 meets={requirement.re.test(form.values.password)}
164 />
151 inputContainer={(children) => <Stack spacing={4}>{children}</Stack>}
152 >
153 <Checkbox
154 key={`${item.id}-${par}-item`}155 label={`${item.icon} ${t(item.tsKey, { ns: item.tsNs })}`}
156 {...form.getInputProps(`formOptions.communities.${par}.id`)}
157 />
145 }
146
147 return (
148 <div key={`${item.id}-${par}`}>149 <Checkbox.Group
150 {...form.getInputProps('communityFocus')}
151 inputContainer={(children) => <Stack spacing={4}>{children}</Stack>}
133 >
134 {item.children.map((child, i) => (
135 <Checkbox
136 key={`${child.id}-${par}-${i}`}137 label={t(child.tsKey, { ns: child.tsNs })}
138 pl={40}
139 {...form.getInputProps(`formOptions.communities.${par}.children.${i}.id`)}
133 >
134 {item.children.map((child, i) => (
135 <Checkbox
136 key={`${child.id}-${par}-${i}`}137 label={t(child.tsKey, { ns: child.tsNs })}
138 pl={40}
139 {...form.getInputProps(`formOptions.communities.${par}.children.${i}.id`)}
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.
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} />);
});
cards.map((cardData) => (
<Card key={cardData.id} data={cardData} />
));
buttonData.forEach((btnData) => {
buttons.push(<Hello key={btnData.id} text={btnData.text} />);
});