mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
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>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user