265 <div className="mt-12 flex justify-center">
266 <div className="xs:grid-cols-2 grid grid-cols-1 gap-8 sm:grid-cols-3 lg:grid-cols-3">
267 {items.map((item) => (
268 <DashCard item={item} />269 ))}
270 <SignOut />
271 </div>
A key
is a special string attribute you need to include when creating lists of elements because keys help React
identify which items have changed, added, or removed.
Keys should be given to the elements to give them a stable identity.
The best way to pick a key
is to use a string that uniquely identifies a list item among its siblings. Most often, you would use IDs from your data as keys.
When you don't have stable IDs for rendered items, you may use the item index as a key
as a last resort.
// Missing key for component
[<Hello />, <Hello />, <Hello />];
// Missing key for each element data
data.map(x => <Hello>{x}</Hello>);
// Invalid Syntax: `key` attribute before spread
<span key={"key-after-spread"} {...spread} />;
// Missing `key` attribute
data.map(x => <>{x}</>);
// Updated component with key
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
// Updated component with key for array `data`
data.map((x, i) => <Hello key={i}>{x}</Hello>);
// `key` attribute after spread
<span {...spread} key={"key-after-spread"} />;
// Updated `key` attribute
data.map(x => <key="key">{x}</>);