Use object IDs instead of array indices as keys

webclient/src/Admin.js

@@ -185,8 +185,8 @@ export function AdminMemberCards(props) {
 			<Header size='small'>Current Cards</Header>
 
 			{cards.length ?
-				cards.map((x, i) =>
+				cards.map(x =>
-					<AdminCardDetail key={i} card={x} {...props} />
+					<AdminCardDetail key={x.id} card={x} {...props} />
 				)
 			:
 				<p>None</p>

webclient/src/Cards.js

@@ -28,8 +28,8 @@ export function Cards(props) {
 						</Table.Header>
 
 						<Table.Body>
-							{user.cards.map((x, i) =>
+							{user.cards.map(x =>
-								<Table.Row key={i}>
+								<Table.Row key={x.id}>
 									<Table.Cell>{x.card_number}</Table.Cell>
 									<Table.Cell>{x.notes}</Table.Cell>
 									<Table.Cell>{x.last_seen_at}</Table.Cell>

webclient/src/Classes.js

@@ -25,8 +25,8 @@ function ClassTable(props) {
 
 			<Table.Body>
 				{classes.length ?
-					classes.map((x, i) =>
+					classes.map(x =>
-						<Table.Row key={i}>
+						<Table.Row key={x.id}>
 							<Table.Cell>{x.course_name}</Table.Cell>
 							<Table.Cell>
 								<Link to={'/classes/'+x.id}>
@@ -182,7 +182,7 @@ export function ClassDetail(props) {
 
 						{(isAdmin(user) || clazz.instructor === user.id) &&
 							<Segment padded>
-								<InstructorClassAttendance clazz={clazz} {...props} />
+								<InstructorClassAttendance clazz={clazz} refreshClass={refreshClass} {...props} />
 							</Segment>
 						}
 

webclient/src/Courses.js

@@ -40,8 +40,8 @@ export function Courses(props) {
 
 					<Table.Body>
 						{courses.length ?
-							courses.map((x, i) =>
+							courses.map(x =>
-								<Table.Row key={i}>
+								<Table.Row key={x.id}>
 									<Table.Cell>
 										<Link to={'/courses/'+x.id}>{x.name}</Link>
 									</Table.Cell>
@@ -115,8 +115,8 @@ export function CourseDetail(props) {
 
 							<Table.Body>
 								{course.sessions.length ?
-									course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map((x, i) =>
+									course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map(x =>
-										<Table.Row key={i}>
+										<Table.Row key={x.id}>
 											<Table.Cell>
 												<Link to={'/classes/'+x.id}>
 													{moment.utc(x.datetime).local().format('ll')}

webclient/src/Home.js

@@ -81,8 +81,8 @@ function MemberInfo(props) {
 			<BasicTable>
 				<Table.Body>
 					{lastTrans.length ?
-						lastTrans.map((x, i) =>
+						lastTrans.map(x =>
-							<Table.Row key={i}>
+							<Table.Row key={x.id}>
 								<Table.Cell>
 									<Link to={'/transactions/'+x.id}>{x.date}</Link>
 								</Table.Cell>

webclient/src/InstructorClasses.js

@@ -8,7 +8,7 @@ import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Ico
 import { BasicTable, staticUrl, requester } from './utils.js';
 
 function AttendanceRow(props) {
-	const { student, token } = props;
+	const { student, token, refreshClass } = props;
 	const [training, setTraining] = useState(student);
 	const [error, setError] = useState(false);
 
@@ -17,6 +17,7 @@ function AttendanceRow(props) {
 		requester('/training/'+training.id+'/', 'PATCH', token, data)
 		.then(res => {
 			setTraining(res);
+			refreshClass();
 			setError(false);
 		})
 		.catch(err => {
@@ -74,8 +75,8 @@ export function InstructorClassAttendance(props) {
 			<Header size='small'>Mark Attendance</Header>
 
 			{clazz.students.length ?
-				clazz.students.map((x, i) =>
+				clazz.students.map(x =>
-					<p><AttendanceRow key={i} student={x} {...props} /></p>
+					<p><AttendanceRow key={x.id} student={x} {...props} /></p>
 				)
 			:
 				<p>No students yet.</p>

webclient/src/Members.js

@@ -50,8 +50,8 @@ export function Members(props) {
 			{response ?
 				<Item.Group unstackable divided>
 					{response.results.length ?
-						response.results.map((x, i) =>
+						response.results.map(x =>
-							<Item key={i} as={Link} to={'/members/'+x.member.id}>
+							<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
 								<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
 								<Item.Content verticalAlign='top'>
 									<Item.Header>{x.member.preferred_name} {x.member.last_name}</Item.Header>

webclient/src/Training.js

@@ -25,8 +25,8 @@ export function Training(props) {
 					</Table.Header>
 
 					<Table.Body>
-						{user.training.map((x, i) =>
+						{user.training.map(x =>
-							<Table.Row key={i}>
+							<Table.Row key={x.id}>
 								<Table.Cell>{x.session.course_name}</Table.Cell>
 								<Table.Cell>
 									<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>

webclient/src/Transactions.js

@@ -24,8 +24,8 @@ export function Transactions(props) {
 
 				<Table.Body>
 					{user.transactions.length ?
-						user.transactions.slice().reverse().map((x, i) =>
+						user.transactions.slice().reverse().map(x =>
-							<Table.Row key={i}>
+							<Table.Row key={x.id}>
 								<Table.Cell>
 									<Link to={'/transactions/'+x.id}>{x.date}</Link>
 								</Table.Cell>