Merge pull request #2501 from webkom/better-keys

Quick keys

Author: SmithPeder

app/components/UserAttendance/AttendanceModal.js

@@ -79,7 +79,7 @@ class AttendanceModal extends Component<Props, State> {
         <h2>{title}</h2>
         <ul className={styles.list}>
           {activePool.registrations.map((registration, i) => (
-            <li key={i}>
+            <li key={registration.id}>
               <div className={styles.row}>
                 <ProfilePicture size={30} user={registration.user} />
                 <Link to={`/users/${registration.user.username}`}>

app/routes/pages/components/PageDetail.js

@@ -179,23 +179,23 @@ export const GroupRenderer = ({ page }: { page: Object }) => {
         <div className={styles.leaderBoard}>
           <div className={styles.leader}>
             {leaders.map(({ user }, key) => (
-              <GroupMember user={user} key={key} leader />
+              <GroupMember user={user} key={user.id} leader />
             ))}
           </div>
           <div className={styles.co_leader}>
             {co_leaders.map(({ user }, key) => (
-              <GroupMember user={user} key={key} co_leader />
+              <GroupMember user={user} key={user.id} co_leader />
             ))}
           </div>
         </div>
         <div className={styles.members}>
           {members.map(({ user }, key) => (
-            <GroupMember user={user} key={key} />
+            <GroupMember user={user} key={user.id} />
           ))}
         </div>
         <div className={styles.members}>
           {activeRetirees.map(({ user }, key) => (
-            <GroupMember user={user} key={key} />
+            <GroupMember user={user} key={user.id} />
           ))}
         </div>
       </div>

app/routes/users/components/UserProfile.js

@@ -149,7 +149,7 @@ const ListEvents = ({ events, noEventsMessage, loggedIn }: EventsProps) => (
       <Flex column wrap>
         {events.map((event, i) => (
           <EventItem
-            key={i}
+            key={event.id}
             event={event}
             showTags={false}
             loggedIn={loggedIn}