Fix some potential issues when displaying languages

2 files changed, 17 insertions, 3 deletions

diff --git a/frontend/src/Movies/index.tsx b/frontend/src/Movies/index.tsx
index e3b79fb01..414def495 100644
--- a/frontend/src/Movies/index.tsx
+++ b/frontend/src/Movies/index.tsx
@@ -16,6 +16,7 @@ import { useReduxAction } from "../@redux/hooks/base";
 import { MoviesApi } from "../apis";
 import { ActionBadge, TextPopover } from "../components";
 import BaseItemView from "../generic/BaseItemView";
+import { BuildKey } from "../utilites";
 
 interface Props {}
 
@@ -73,7 +74,11 @@ const MovieView: FunctionComponent<Props> = () => {
         accessor: "audio_language",
         Cell: (row) => {
           return row.value.map((v) => (
-            <Badge variant="secondary" className="mr-2" key={v.code2}>
+            <Badge
+              variant="secondary"
+              className="mr-2"
+              key={BuildKey(v.code2, v.code2, v.hi)}
+            >
               {v.name}
             </Badge>
           ));
@@ -99,7 +104,11 @@ const MovieView: FunctionComponent<Props> = () => {
         Cell: (row) => {
           const missing = row.value;
           return missing.map((v) => (
-            <Badge className="mx-2" variant="warning" key={v.code2}>
+            <Badge
+              className="mx-2"
+              variant="warning"
+              key={BuildKey(v.code2, v.hi, v.forced)}
+            >
               {v.code2}
             </Badge>
           ));
diff --git a/frontend/src/Series/index.tsx b/frontend/src/Series/index.tsx
index ca13cdfe3..a01b8c06a 100644
--- a/frontend/src/Series/index.tsx
+++ b/frontend/src/Series/index.tsx
@@ -14,6 +14,7 @@ import { useReduxAction } from "../@redux/hooks/base";
 import { SeriesApi } from "../apis";
 import { ActionBadge } from "../components";
 import BaseItemView from "../generic/BaseItemView";
+import { BuildKey } from "../utilites";
 
 interface Props {}
 
@@ -59,7 +60,11 @@ const SeriesView: FunctionComponent<Props> = () => {
         accessor: "audio_language",
         Cell: (row) => {
           return row.value.map((v) => (
-            <Badge variant="secondary" className="mr-2" key={v.code2}>
+            <Badge
+              variant="secondary"
+              className="mr-2"
+              key={BuildKey(v.code2, v.forced, v.hi)}
+            >
               {v.name}
             </Badge>
           ));