Fix key prop in ComputePricingCalculator dropdown menu items (#43110)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

The dropdown menu items in the ComputePricingCalculator component use a
hardcoded key value of `"custom-expiry"` for all plan items in the map
function. This causes React to not properly identify unique list items,
which can lead to rendering issues and state management problems when
multiple plans are displayed.

## What is the new behavior?

Changed the key prop from the hardcoded `"custom-expiry"` to
`plan.name`, which uniquely identifies each plan item. This ensures
React can properly track and render each dropdown menu item.

## Additional context

This is a common React anti-pattern where using a constant key for list
items prevents React from properly reconciling the virtual DOM. Using
`plan.name` as the key ensures each plan has a unique identifier for
proper rendering and state management.

https://claude.ai/code/session_01HDfar7A1XXJFJDchPPSQTK

Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
Ivan VasilovandClaude authored and GitHub committed 2026-02-24 11:09:15 +08:00
1 parent 04e63dfb2e
commit 3f7d62ef3d
1 file changed
+1 -1
@@ -208,7 +208,7 @@ const ComputePricingCalculator = ({ disableInteractivity }: { disableInteractivi
</DropdownMenuTrigger>
<DropdownMenuContent side="bottom" align="start">
{plans.map((plan: any) => (
<DropdownMenuItem key="custom-expiry" onClick={() => setActivePlan(plan)}>
<DropdownMenuItem key={plan.name} onClick={() => setActivePlan(plan)}>
{plan.name}
</DropdownMenuItem>
))}