From 967f9762c3ac61cf9f7f5a58be8acc793c0bfb17 Mon Sep 17 00:00:00 2001
From: likiosliu <likiosliu@gmail.com>
Date: Wed, 25 Mar 2026 10:41:56 +0800
Subject: [PATCH] fix: replace key={index} with stable keys in pricing
 component

Use plan.name and feature text as keys instead of array indices.

Closes #942
---
 surfsense_web/components/pricing.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/pricing.tsx b/surfsense_web/components/pricing.tsx
index 0023a3eaf..731c3654c 100644
--- a/surfsense_web/components/pricing.tsx
+++ b/surfsense_web/components/pricing.tsx
@@ -101,9 +101,9 @@ export function Pricing({
 					plans.length === 2 ? "md:grid-cols-2 max-w-5xl mx-auto" : "md:grid-cols-3"
 				)}
 			>
-				{plans.map((plan, index) => (
+				{plans.map((plan) => (
 					<motion.div
-						key={index}
+						key={plan.name}
 						initial={{ y: 50, opacity: 1 }}
 						whileInView={
 							isDesktop
@@ -193,8 +193,8 @@ export function Pricing({
 							</p>
 
 							<ul className="mt-5 gap-2 flex flex-col">
-								{plan.features.map((feature, idx) => (
-									<li key={idx} className="flex items-start gap-2">
+								{plan.features.map((feature) => (
+									<li key={feature} className="flex items-start gap-2">
 										<Check className="h-4 w-4 text-primary mt-1 flex-shrink-0" />
 										<span className="text-left">{feature}</span>
 									</li>