Verdmat Search Key Collision Fix
Summary
A React console error was identified in the property valuation (Verdmat) interface where duplicate keys were generated for property units. The issue stemmed from an assumption that the fastanumer (Icelandic property ID) is unique across all units, which was disproven by data from Laugavegur 1.
Details
During development of the Verdmat page (src/app/[locale]/verdmat/page.tsx), a React warning was triggered: Encountered two children with the same key, u-2358483. This occurred within the SearchInput component’s mapping logic for property units.
Root Cause
The implementation originally used the fastanumer as the unique identifier for React list keys:
<li key={`u-${item.result.fastanumer}`} role="presentation">Investigation revealed that in certain cases, such as the building at Laugavegur 1, multiple distinct units share the same fastanumer (e.g., 2358483). Because React requires keys to be unique to maintain component identity across updates, this collision caused potential rendering issues and console errors in the Next.js (Turbopack) environment.
Resolution
The fix involved modifying the key generation logic to incorporate the property address, which provides the necessary entropy to distinguish between units sharing a fastanumer. The key was updated to a composite string of address + fastanumer.
The change was applied to the VerdmatPage component around line 370 of src/app/[locale]/verdmat/page.tsx. This ensures that even when the property registry returns duplicate IDs for different physical units in the same building, the UI remains stable and compliant with React’s reconciliation requirements.