Missing "key" prop for element in array
83 <PageLayout
84 title="Customers"
85 extra={[
86 <Button type="primary" size="large" onClick={openCustomerModal}> 87 Create Customer 88 </Button>, 89 ]}
90 >
91 <div>Missing "key" prop for element in array
584 borderStyle: "solid",
585 }}
586 extra={[
587 <Button htmlType="button" onClick={showFeatureModal}>588 Add Feature589 </Button>,590 ]}
591 >
592 <Form.ItemMissing "key" prop for element in iterator
565 >
566 <Radio.Group disabled={type === "version" ? true : false}>
567 {availableBillingTypes.map((type) => (
568 <Radio value={type.name}>{type.label}</Radio>569 ))}
570 </Radio.Group>
571 </Form.Item>Missing "key" prop for element in array
527 }}
528 className="h-full"
529 extra={[
530 <Button531 htmlType="button"532 onClick={() => showComponentModal()}533 >534 Add Component535 </Button>,536 ]}
537 >
538 <Form.ItemMissing "key" prop for element in iterator
436 >
437 <Radio.Group>
438 {availableBillingTypes.map((type) => (
439 <Radio value={type.name}>{type.label}</Radio>440 ))}
441 </Radio.Group>
442 </Form.Item>Missing "key" prop for element in array
456 borderStyle: "solid",
457 }}
458 extra={[
459 <Button htmlType="button" onClick={showFeatureModal}>460 Add Feature461 </Button>,462 ]}
463 >
464 <Form.ItemMissing "key" prop for element in array
398 borderStyle: "solid",
399 }}
400 extra={[
401 <Button402 htmlType="button"403 onClick={() => showComponentModal()}404 >405 Add Component406 </Button>,407 ]}
408 >
409 <Form.ItemMissing "key" prop for element in iterator
444 defaultValue={replacementPlan?.plan_name}
445 >
446 {plans?.map((plan) => (
447 <Select.Option value={plan.plan_id}>448 {plan.plan_name}449 </Select.Option>450 ))}
451 </Select>
452 <div className="my-10">Missing "key" prop for element in iterator
399 {planDetails !== undefined && (
400 <Select onChange={addCurrentPlanVersion} className="w-8/12">
401 {planDetails?.versions.map((version) => (
402 <Select.Option value={version.version_id}>403 {version.version}404 </Select.Option>405 ))}
406 </Select>
407 )}Missing "key" prop for element in iterator
390 defaultValue={currentPlan?.plan_name}
391 >
392 {plans?.map((plan) => (
393 <Select.Option value={plan.plan_id}>394 {plan.plan_name}395 </Select.Option>396 ))}
397 </Select>
398 <div className="my-10">Missing "key" prop for element in iterator
453 {planDetails !== undefined && (
454 <Select onChange={addReplacementPlanVersion} className="w-8/12">
455 {planDetails?.versions.map((version) => (
456 <Select.Option value={version.version_id}>457 {version.version}458 </Select.Option>459 ))}
460 </Select>
461 )}Missing "key" prop for element in iterator
608 >
609 {generateValidProrationGranularity().map(
610 (granularity) => (
611 <Option value={granularity}>{granularity}</Option>612 )
613 )}
614 <Option value="total">none</Option>Missing "key" prop for element in iterator
523 >
524 <Select>
525 {metrics?.map((metric_name) => (
526 <Option value={metric_name}>{metric_name}</Option>527 ))}
528 </Select>
529 </Form.Item>Missing "key" prop for element in iterator
46 }} //id of the target customer)}
47 >
48 {customers?.map((customer) => (
49 <Option value={customer.customer_id}>50 {customer.customer_name}51 </Option>52 ))}
53 </Select>
54 </div>Missing "key" prop for element in iterator
90 <div>
91 <div className={className}>
92 {versions.map((version) => (
93 <div 94 onClick={() => setSelectedVersion(version)} 95 className={[ 96 "flex items-center justify-center versionChip mx-1", 97 isSelectedVersion(version.version_id) 98 ? "bg-[#c3986b] text-white opacity-100" 99 : "bg-[#EAEAEB] text-black",100 version.status === "active" &&101 "border-2 border-[#c3986b] border-opacity-100",102 ].join(" ")}103 >104 v{version.version}105 </div>106 ))}
107 <Link
108 type="text"Missing "key" prop for element in iterator
73 return (
74 <div className="flex items-center justify-around tabsContainer">
75 {tabs.map((tab) => (
76 <Tooltip title={getToolTipText(tab)}> 77 <div 78 onClick={() => { 79 if ( 80 tab === "Active" && 81 currentActiveTab !== "Active" && 82 currentActiveTab !== "Retiring" 83 ) { 84 setActiveModal(); 85 } 86 }} 87 className={[ 88 "tabItem flex items-center", 89 currentActiveTab === tab && "activeTab text-black", 90 ].join(" ")} 91 > 92 {tab} 93 </div> 94 </Tooltip> 95 ))}
96 <Modal
97 visible={visible}Missing "key" prop for element in iterator
14 <div className="flex items-center justify-start flex-wrap">
15 {features && features.length > 0 ? (
16 features.map((feature) => (
17 <div className=" py-2 bg-[#FAFAFA] rounded planComponent mr-4 mb-2 px-4">18 <div className="planDetails planComponentMetricName">19 <div className="pr-1">{feature.feature_name}</div>20 </div>21 <div className="planFeatureDesc">22 {feature.feature_description}23 </div>24 </div>25 ))
26 ) : (
27 <div className="flex items-center justify-start flex-wrap">Missing "key" prop for element in iterator
39 {components && components.length > 0 ? (
40 <div className="flex items-center justify-start flex-wrap">
41 {components.map((component) => (
42 <div className="pt-2 pb-4 bg-[#FAFAFA] rounded planComponent mr-4 mb-2 px-4">43 <div className="planDetails planComponentMetricName">44 <div className="pr-1">Metric:</div>45 <div> {component.billable_metric.billable_metric_name}</div>46 </div>47 <div className="">48 <Table49 dataSource={component.tiers}50 pagination={false}51 showHeader={false}52 bordered={false}53 rowClassName="bg-[#FAFAFA]"54 className="bg-background noborderTable"55 style={{ color: "blue" }}56 size="middle"57 columns={[58 {59 title: "Range",60 dataIndex: "range_start",61 key: "range_start",62 align: "left",63 width: "50%",64 render: (value: any, record: any) => (65 <span>66 From {value} to{" "}67 {record.range_end == null ? "∞" : record.range_end}68 </span>69 ),70 },71 {72 title: "Cost",73 align: "left",74 dataIndex: "cost_per_batch",75 key: "cost_per_batch",76 render: (value: any, record: any) => (77 <div>{renderCost(record)}</div>78 ),79 },80 ]}81 />82 </div>83 </div>84 ))}
85 </div>
86 ) : (Missing "key" prop for element in iterator
11 return (
12 <div className="flex items-center justify-start flex-wrap">
13 {planFeatures.map((feature) => (
14 <div className=" py-2 bg-[#FAFAFA] rounded planComponent mr-4 mb-2">15 <div className="planDetails planComponentMetricName px-4 justify-between">16 <div className="pr-1 font-main font-bold">17 {feature.feature_name}18 </div>19 <Button20 size="small"21 type="text"22 icon={<DeleteOutlined />}23 danger24 onClick={() => removeFeature(feature.feature_name)}25 />26 </div>27 <div className="planFeatureDesc px-4">28 {feature.feature_description}29 </div>30 </div>31 ))}
32 </div>
33 );Missing "key" prop for element in iterator
40 render: (_, record) => (
41 <div>
42 {record.kpis.map((kpi) => (
43 <Tag color={"default"}>{kpi}</Tag>44 ))}
45 </div>
46 ),Missing "key" prop for element in iterator
118 className="w-4/12 self-center"
119 >
120 {metricList.map((metric_name) => (
121 <Option value={metric_name} loading={isLoading}>122 {metric_name}123 </Option>124 ))}
125 </Select>
126 </div>Missing "key" prop for element in array
45 <PageLayout
46 title={"Dashboard"}
47 extra={[
48 <RangePicker 49 id="preset" 50 format={dateFormat} 51 ranges={{ 52 "This month": [dayjs().startOf("month"), dayjs().endOf("month")], 53 "Last month": [ 54 dayjs().subtract(1, "months").startOf("month"), 55 dayjs().subtract(1, "months").endOf("month"), 56 ], 57 "This year": [dayjs().startOf("year"), dayjs().endOf("year")], 58 "All time": [dayjs().subtract(10, "years"), dayjs()], 59 }} 60 defaultValue={dateRange} 61 onCalendarChange={(dates) => { 62 setDateRange(dates); 63 }} 64 />, 65 ]}
66 >
67 <Row gutter={[16, 16]}>Missing "key" prop for element in iterator
42 render: (_, record) => (
43 <div>
44 {record.subscriptions.map((sub) => (
45 <div> 46 <Tag color={"default"}>{sub.billing_plan_name}</Tag> 47 <Tag color={"default"}>v{sub.plan_version}</Tag>{" "} 48 </div> 49 ))}
50 </div>
51 ),Missing "key" prop for element in iterator
262 <div className="flex flex-col justify-center">
263 <List>
264 {subscriptions.map((subscription) => (
265 <List.Item>266 <Card className=" bg-grey3 w-full">267 <div className="grid grid-cols-2 items-stretch">268 <h2 className="font-main font-bold">269 {subscription.billing_plan_name}270 </h2>271 <div className="grid grid-cols-2 justify-center space-y-3">272 <p>273 <b>Subscription ID: </b> {subscription.subscription_id}274 </p>275 <p>276 <b>Start Date:</b>{" "}277 {dayjs(subscription.start_date).format(278 "YYYY/MM/DD HH:mm"279 )}{" "}280 </p>281282 <p>283 <b>Renews:</b>{" "}284 {subscription.auto_renew ? (285 <Tag color="green">Yes</Tag>286 ) : (287 <Tag color="red">No</Tag>288 )}289 </p>290 <p>291 <b>End Date:</b>{" "}292 {dayjs(subscription.end_date).format("YYYY/MM/DD HH:mm")}{" "}293 </p>294 </div>295 </div>296 </Card>297 </List.Item>298 ))}
299 </List>
300 <div className="grid grid-cols-2 w-full space-x-5 my-6">Missing "key" prop for element in iterator
331 {record.metadata && (
332 <p className="text-s text-grey2">
333 {Object.keys(record.metadata).map((key) => (
334 <span>335 {key}: {record.metadata[key]}336 </span>337 ))}
338 </p>
339 )}
Description
A key is a special string attribute you need to include when creating lists of elements because keys help React identify which items have changed, added, or removed.
Keys should be given to the elements to give them a stable identity.
The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often, you would use IDs from your data as keys.
When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort.
Bad Practice
// Missing key for component
[<Hello />, <Hello />, <Hello />];
// Missing key for each element data
data.map(x => <Hello>{x}</Hello>);
// Invalid Syntax: `key` attribute before spread
<span key={"key-after-spread"} {...spread} />;
// Missing `key` attribute
data.map(x => <>{x}</>);
Recommended
// Updated component with key
[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
// Updated component with key for array `data`
data.map((x, i) => <Hello key={i}>{x}</Hello>);
// `key` attribute after spread
<span {...spread} key={"key-after-spread"} />;
// Updated `key` attribute
data.map(x => <key="key">{x}</>);