BUG: Duplicate React keys in AI Tagging view (FaceCollections.tsx)

[amish-kumar-07]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

Description

React reports duplicate key values when rendering face clusters in the AI-tagging section. Since React relies on unique keys to correctly track component identity, this may lead to unstable UI behavior or unexpected rendering issues.

---

Location

/src/components/FaceCollections.tsx

---

Console Warning

Encountered two children with the same key, `xxxxx`.
Keys should be unique so that components maintain their identity across updates.

---

Screenshot

---

Steps to Reproduce

1. Navigate to the AI-Tagging section
2. Load the face clusters
3. Open the browser console
4. Observe the React warnings about duplicate keys

---

Expected Behavior

Each rendered list item should have a unique and stable key value.

---

Actual Behavior

React logs warnings about duplicate key props when rendering cluster items. This may cause components to render incorrectly or lose their identity across updates.

---

Possible Cause

The key prop appears to be generated from a value that is not guaranteed to be unique or stable across the list.

---

Suggested Fix

Ensure the key is always unique. For example:

{ clusters.map((cluster: any, i: number) => (
  <div key={`${cluster.cluster_id}-${i}`}>

Alternatively, if cluster_id is guaranteed unique, it can be used directly.

---

Environment

• Browser:
• OS:
• App version / commit hash:

---

Additional Context

I’d be happy to help test or submit a PR for this fix.

Record

• I agree to follow this project's Code of Conduct

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Denish004]

Hey, i would like to solve this issue.

[amish-kumar-07]

Hi @rahulharpal1603, thanks for the great project.
I came across this issue and wanted to report it. If you’re okay with it, I’d be happy to work on a PR to fix the duplicate React key warnings

[AnubhavKiroula]

Hi, I’m Anubhav preparing for GSoC 2026.
I’d like to work on this issue and submit a PR.

Here’s my plan to fix it:

1. Reproduce the bug locally by running the app and navigating to the AI tagging / face collections view to confirm the duplicate React key warning in the console.
2. Inspect the component (frontend/src/components/FaceCollections.tsx) to identify where duplicate keys are being used in the map() function.
3. Update the code to ensure each rendered element has a unique key — for example, by using a unique id from the data instead of relying on array indices.
4. Test locally to confirm that the React warning disappears and the UI still renders correctly.
5. Commit changes with a clear message (Fix duplicate React keys in FaceCollections.tsx).
6. Push the branch and open a PR referencing this issue (Fixes #888).

This workflow will ensure the bug is resolved cleanly and prevent future React warnings.
Please let me know if I can proceed with this issue.