Fix document table array keys

.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.

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}

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>