Do not use Array index in keys
59 <div>
60 {Object.keys(channels).map((c, idx) => (
61 <span
62 key={idx} 63 className={`px-5 text-sm overflow-auto mr-[2vw] py-3 hover:bg-gray-200 hover:cursor-pointer rounded-lg ${
64 channel == c && 'bg-gray-300'
65 }`}Do not use Array index in keys
81 ref={idx == posts.length - 1 ? lastPostRef : null}
82 >
83 <Post
84 key={idx} 85 showProductIcon={true}
86 data={p}
87 channel={channel}Do not use Array index in keys
77 posts.map((p, idx) => {
78 return (
79 <div
80 key={idx} 81 ref={idx == posts.length - 1 ? lastPostRef : null}
82 >
83 <PostDo not use Array index in keys
67 ? (
68 filteredUsers.map((user, idx) => {
69 return (
70 <div key={idx} className={"block"}> 71 {userID == productUserID
72 ? (
73 <div>Do not use Array index in keys
147 msgs.map((m: message, idx: number) => {
148 return (
149 <div
150 key={idx}151 ref={idx == msgs.length - 1
152 ? lastMsg
153 : idx == 0Do not use Array index in keys
67 {posts.map((post, idx) => {
68 return (
69 <div
70 key={idx}71 ref={idx == posts.length - 1 ? lastPostRef : null}
72 >
73 {idx == posts.length - 1 && "LAST ONE"}Do not use Array index in keys
124 {Object.keys(fields).map((field, idx) => {
125 return (
126 <Button
127 key={idx}128 onClick={() => handleAdd(fields[field].name)}
129 icon={fields[field].icon}
130 className={'mb-4'}Do not use Array index in keys
179 return (
180 <div
181 className="flex justify-center w-full"
182 key={idx}183 >
184 <img
185 src={URL.createObjectURL(Do not use Array index in keys
12 <div className="mt-4">
13 {followed_products ? (
14 followed_products.map((product, idx) => {
15 return <Product product={product} showDesc={false} key={idx} />;16 })
17 ) : (
18 <h1>no followed products</h1>Do not use Array index in keys
89 {images &&
90 images.map((i, idx) => (
91 <div
92 key={idx} 93 className={"flex justify-center w-full"}
94 >
95 {" "}Do not use Array index in keys
39 {posts.length > 0
40 ? posts.map((t, idx) => {
41 return (
42 <div key={idx}>43 <PostCard
44 productId={productId}
45 setList={setPosts}Do not use Array index in keys
100 {posts.map((post, idx) => {
101 return (
102 <div
103 key={idx}104 ref={
105 idx == posts.length - 1
106 ? lastPostRef
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} />);
});