fix: add missing "key" to React arrays (#3043)

This commit is contained in:
Gauthier
2026-05-18 16:38:40 +02:00
committed by GitHub
parent a8f147d083
commit 4fa2c71b84
4 changed files with 22 additions and 20 deletions

View File

@@ -27,7 +27,7 @@ import axios from 'axios';
import { uniq } from 'lodash';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useMemo, useState } from 'react';
import { Fragment, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import useSWR from 'swr';
@@ -264,12 +264,12 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
</Link>
))
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
b: curr,
})}
</>
</Fragment>
))
);
}
@@ -378,11 +378,11 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
collectionAttributes
.map((t, k) => <span key={k}>{t}</span>)
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{prev}
<span>|</span>
{curr}
</>
</Fragment>
))}
</span>
</div>

View File

@@ -59,7 +59,7 @@ import 'country-flag-icons/3x2/flags.css';
import { uniqBy } from 'lodash';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import useSWR from 'swr';
@@ -279,12 +279,12 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
</Link>
))
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
b: curr,
})}
</>
</Fragment>
))
);
}
@@ -553,11 +553,11 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
movieAttributes
.map((t, k) => <span key={k}>{t}</span>)
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{prev}
<span>|</span>
{curr}
</>
</Fragment>
))}
</span>
</div>
@@ -1067,7 +1067,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
<span className="media-fact-value flex flex-row flex-wrap gap-5">
{streamingProviders.map((p) => {
return (
<Tooltip content={p.name}>
<Tooltip content={p.name} key={`tooltip-${p.id}`}>
<span
className="opacity-50 transition duration-300 hover:opacity-100"
key={`provider-${p.id}`}

View File

@@ -740,7 +740,9 @@ const SettingsJobs = () => {
<p className="description">
{intl.formatMessage(messages.imagecacheDescription, {
code: (msg: React.ReactNode) => (
<code className="bg-gray-800/50">{msg}</code>
<code key="code-block" className="bg-gray-800/50">
{msg}
</code>
),
appDataPath: appData ? appData.appDataPath : '/app/config',
})}

View File

@@ -63,7 +63,7 @@ import { countries } from 'country-flag-icons';
import 'country-flag-icons/3x2/flags.css';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
import { useIntl } from 'react-intl';
import useSWR from 'swr';
@@ -264,12 +264,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
</Link>
))
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
b: curr,
})}
</>
</Fragment>
))
);
}
@@ -595,11 +595,11 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
seriesAttributes
.map((t, k) => <span key={k}>{t}</span>)
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{prev}
<span>|</span>
{curr}
</>
</Fragment>
))}
</span>
</div>
@@ -1271,12 +1271,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
</Link>
))
.reduce((prev, curr) => (
<>
<Fragment key={`${prev.key}-${curr.key}`}>
{intl.formatMessage(globalMessages.delimitedlist, {
a: prev,
b: curr,
})}
</>
</Fragment>
))}
</span>
</div>
@@ -1287,7 +1287,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
<span className="media-fact-value flex flex-row flex-wrap gap-5">
{streamingProviders.map((p) => {
return (
<Tooltip content={p.name}>
<Tooltip content={p.name} key={`tooltip-${p.id}`}>
<span
className="opacity-50 transition duration-300 hover:opacity-100"
key={`provider-${p.id}`}