Index by instance not id - more unique.

Author: soup-bowl

frontend/src/components/AlbumGrid.tsx

@@ -10,7 +10,7 @@ interface AlbumProps {
 }
 
 const AlbumGridEntry: React.FC<AlbumProps> = ({ album, onClickAlbum }) => (
-	<IonCol size="6" sizeMd="4" sizeLg="3" key={album.id}>
+	<IonCol size="6" sizeMd="4" sizeLg="3" key={album.instance_id}>
 		<div className="album-art-container" onClick={() => onClickAlbum(album)}>
 			<img
 				src={album.image_base64 ? album.image_base64 : album.basic_information.thumb}
@@ -40,7 +40,7 @@ const AlbumGrid: React.FC<CollectionProps> = ({ data, onClickAlbum }) => (
 				<IonGrid>
 					<IonRow>
 						{options[1].map((album) => (
-							<AlbumGridEntry key={album.id} album={album} onClickAlbum={onClickAlbum} />
+							<AlbumGridEntry key={album.instance_id} album={album} onClickAlbum={onClickAlbum} />
 						))}
 					</IonRow>
 				</IonGrid>

frontend/src/components/AlbumList.tsx

@@ -46,7 +46,7 @@ export const AlbumListGroups: React.FC<{
 					<IonLabel>{options[0]}</IonLabel>
 				</IonItemDivider>
 				{options[1].map((album) => (
-					<AlbumListItem key={album.id} album={album} onClickAlbum={onClickAlbum} />
+					<AlbumListItem key={album.instance_id} album={album} onClickAlbum={onClickAlbum} />
 				))}
 			</IonItemGroup>
 		))}
@@ -65,7 +65,7 @@ export const AlbumList: React.FC<{
 			</IonListHeader>
 		)}
 		{data.map((album) => (
-			<AlbumListItem key={album.id} album={album} onClickAlbum={onClickAlbum} />
+			<AlbumListItem key={`${album.instance_id}`} album={album} onClickAlbum={onClickAlbum} />
 		))}
 	</IonList>
 )