yjaw commented on code in PR #62352:
URL: https://github.com/apache/airflow/pull/62352#discussion_r2840777916
##########
airflow-core/src/airflow/ui/src/components/ui/Pagination/Items.tsx:
##########
@@ -24,13 +24,15 @@ import { Item } from "./Item";
export const Items = (props: React.HTMLAttributes<HTMLElement>) => (
<ChakraPagination.Context>
{({ pages }) =>
- pages.map((page, index) =>
- page.type === "ellipsis" ? (
- <Ellipsis index={index} key={page.type} {...props} />
- ) : (
- <Item key={page.value} type="page" value={page.value} {...props} />
- ),
- )
+ pages.map((page, index) => {
+ if (page.type === "ellipsis") {
+ const prevVal = (pages[index - 1] as { value: number }).value;
+
+ return <Ellipsis index={index} key={`ellipsis-${prevVal}`}
{...props} />;
Review Comment:
I also think that using an index is more elegant and eliminates the concern
of an array out-of-range error. However, it appears that the linter does not
allow us to use an index as a key. I agree that we cloud try other way to make
key unique.
here is error message:
error Do not use Array index in keys react/no-array-index-key
✖ 1 problem (1 error, 0 warnings)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
