Fix album page genre keys

Fix keys for genre/artist columns

Fix keys for the album view genre list

Additional fix to genre/artist keys

src/components/library/AlbumView.tsx

@@ -366,12 +366,11 @@ const AlbumView = ({ ...rest }: any) => {
                   Added {formatDate(data.created)}
                   {data.genre.map((d: Genre, i: number) => {
                     return (
-                      <>
+                      <span key={nanoid()}>
                         {i === 0 && ' • '}
                         {i > 0 && ', '}
                         <LinkWrapper maxWidth="13vw">
                           <StyledLink
-                            key={nanoid()}
                             tabIndex={0}
                             onClick={() => {
                               if (!rest.isModal) {
@@ -396,7 +395,7 @@ const AlbumView = ({ ...rest }: any) => {
                             {d.title}
                           </StyledLink>
                         </LinkWrapper>
-                      </>
+                      </span>
                     );
                   })}
                 </PageHeaderSubtitleDataLine>

src/components/viewtypes/ListViewTable.tsx

@@ -746,7 +746,7 @@ const ListViewTable = ({
                                 }}
                               >
                                 {(rowData.artist || []).map((artist: GenericItem, i: number) => (
-                                  <>
+                                  <span key={`${rowData.uniqueId}-${artist.id}`}>
                                     <SecondaryTextWrapper
                                       key={nanoid()}
                                       playing={
@@ -762,7 +762,10 @@ const ListViewTable = ({
                                     >
                                       {i > 0 && ', '}
                                     </SecondaryTextWrapper>
-                                    <CustomTooltip key={artist.id} text={artist.title}>
+                                    <CustomTooltip
+                                      key={`artist-${rowData.uniqueId}-${artist.id}`}
+                                      text={artist.title}
+                                    >
                                       <RsuiteLinkButton
                                         subtitle="true"
                                         appearance="link"
@@ -796,7 +799,7 @@ const ListViewTable = ({
                                         {artist.title}
                                       </RsuiteLinkButton>
                                     </CustomTooltip>
-                                  </>
+                                  </span>
                                 ))}
                               </span>
                             </Row>
@@ -923,13 +926,9 @@ const ListViewTable = ({
                           <>
                             {rowData.genre ? (
                               rowData.genre.map((genre: GenericItem, i: number) => (
-                                <>
-                                  {i > 0 && <span key={nanoid()}>, </span>}
-
-                                  <CustomTooltip
-                                    key={genre.id}
-                                    text={rowData[column.dataKey][i]?.title}
-                                  >
+                                <span key={`${rowData.uniqueId}-${genre.id}`}>
+                                  {i > 0 && ', '}
+                                  <CustomTooltip text={genre.title}>
                                     <RsuiteLinkButton
                                       appearance="link"
                                       onClick={(e: any) => {
@@ -937,15 +936,11 @@ const ListViewTable = ({
                                           dispatch(
                                             setActive({
                                               ...album.active,
-                                              filter: rowData[column.dataKey][i]?.title,
+                                              filter: genre.title,
                                             })
                                           );
                                           setTimeout(() => {
-                                            history.push(
-                                              `/library/album?sortType=${
-                                                rowData[column.dataKey][i]?.title
-                                              }`
-                                            );
+                                            history.push(`/library/album?sortType=${genre.title}`);
                                           }, 50);
                                         }
                                       }}
@@ -962,10 +957,10 @@ const ListViewTable = ({
                                         fontSize: `${fontSize}px`,
                                       }}
                                     >
-                                      {rowData[column.dataKey][i]?.title}
+                                      {genre.title}
                                     </RsuiteLinkButton>
                                   </CustomTooltip>
-                                </>
+                                </span>
                               ))
                             ) : (
                               <span>&#8203;</span>