From ed10fec56c49f091f91f9498b28552b636d1bd8f Mon Sep 17 00:00:00 2001
From: Andre Vitorio <andre@vitorio.net>
Date: Tue, 30 Jun 2026 12:21:32 -0300
Subject: [PATCH] Fix document table array keys

---
 .changeset/fix-document-table-array-keys.md   |  5 ++
 .../src/components/documents-table.tsx        |  4 +-
 .../components/tests/documents-table.test.tsx | 46 +++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-document-table-array-keys.md

diff --git a/.changeset/fix-document-table-array-keys.md b/.changeset/fix-document-table-array-keys.md
new file mode 100644
index 00000000..8628c171
--- /dev/null
+++ b/.changeset/fix-document-table-array-keys.md
@@ -0,0 +1,5 @@
+---
+'outstatic': patch
+---
+
+Fix duplicate React key warnings when document table array fields contain repeated labels.
diff --git a/packages/outstatic/src/components/documents-table.tsx b/packages/outstatic/src/components/documents-table.tsx
index 294b9a60..5dd24b0c 100644
--- a/packages/outstatic/src/components/documents-table.tsx
+++ b/packages/outstatic/src/components/documents-table.tsx
@@ -63,9 +63,9 @@ const documentColumnLabel = (id: string): string =>
 
 const renderCellValue = (value: unknown): ReactNode => {
   if (Array.isArray(value)) {
-    return value.map((item: { label: string }) => (
+    return value.map((item: { label: string; value?: unknown }, index) => (
       <span
-        key={item.label}
+        key={`${item.value ?? item.label}-${index}`}
         className="bg-muted text-muted-foreground me-2 rounded px-2.5 py-0.5 text-xs font-medium"
       >
         {item.label}
diff --git a/packages/outstatic/src/components/tests/documents-table.test.tsx b/packages/outstatic/src/components/tests/documents-table.test.tsx
index 4d277427..6833e4ae 100644
--- a/packages/outstatic/src/components/tests/documents-table.test.tsx
+++ b/packages/outstatic/src/components/tests/documents-table.test.tsx
@@ -114,6 +114,52 @@ describe('DocumentsTable', () => {
     expect(screen.getByText(date2)).toBeInTheDocument()
   })
 
+  it('renders array field values without duplicate key warnings', () => {
+    const consoleError = jest
+      .spyOn(console, 'error')
+      .mockImplementation(() => {})
+
+    mockUseGetDocuments.mockImplementation(() => ({
+      data: {
+        documents: [
+          {
+            slug: 'doc1',
+            title: 'Document 1',
+            tags: [
+              { label: 'News', value: 'news' },
+              { label: 'News', value: 'news' }
+            ],
+            content: '',
+            collection: 'testCollection'
+          }
+        ],
+        metadata: new Map([
+          ['title', 'string'],
+          ['tags', 'array'],
+          ['slug', 'string']
+        ])
+      },
+      refetch: jest.fn()
+    }))
+
+    render(
+      <TestWrapper>
+        <DocumentsTable />
+      </TestWrapper>
+    )
+
+    expect(screen.getAllByText('News')).toHaveLength(2)
+    expect(
+      consoleError.mock.calls.some((args) =>
+        String(args[0]).includes(
+          'Each child in a list should have a unique "key" prop'
+        )
+      )
+    ).toBe(false)
+
+    consoleError.mockRestore()
+  })
+
   it('renders table headers for the default visible columns', () => {
     render(
       <TestWrapper>