From 3f7d62ef3d62f3c6eaeb063ef35925d6fd9b43f5 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Tue, 24 Feb 2026 04:09:15 +0100 Subject: [PATCH] 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 --- apps/www/components/Pricing/ComputePricingCalculator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/www/components/Pricing/ComputePricingCalculator.tsx b/apps/www/components/Pricing/ComputePricingCalculator.tsx index d6759d610c5..9239e75c9f8 100644 --- a/apps/www/components/Pricing/ComputePricingCalculator.tsx +++ b/apps/www/components/Pricing/ComputePricingCalculator.tsx @@ -208,7 +208,7 @@ const ComputePricingCalculator = ({ disableInteractivity }: { disableInteractivi {plans.map((plan: any) => ( - setActivePlan(plan)}> + setActivePlan(plan)}> {plan.name} ))}