Each child in a list should have a unique “key” prop. Even though i am giving a key and its a unique one

Question

I know this question has been asked a lot and i fully understand the importance of key for react to re-render correct components but i am giving a key and doing everything right but for some reason its still giving me this warning.

payment-packages.component.jsx

import React from "react";

import { Row, Col } from "react-bootstrap";



import PaymentList from "../payment-list/payment-list.component";

const PaymentPackages = ({ packages }) => {
  const orgSize = useSelector((state) => state.registeredUser.orgSize);

  //Recommended payment plans objects to show

  

  // Other packages plans
  let plan1, plan2;

  const otherPlans = packages.filter(
    ({ priceInfo }) => priceInfo.description !== orgSize.toLowerCase()
  );
  if (recommendedHeading.toLowerCase() === "small organization") {
    plan1 = "medium organization";
    plan2 = "large organization";
  } else if (recommendedHeading.toLowerCase() === "medium organization") {
    plan1 = "small organization";
    plan2 = "large organization";
  } else if (recommendedHeading.toLowerCase() === "large organization") {
    plan1 = "small organization";
    plan2 = "medium organization";
  }
  const paymentPlan1 = otherPlans.filter(
    ({ priceInfo }) => priceInfo.description === plan1
  );
 
 
  return (
    <>
      <div className="price-plan" data-test="price-plan">
        <Row>
          <Col>
            <div className="payment-box left-box">
              
              {paymentPlan1.map(({ priceInfo, id }, i) => (
                <>
                  <PaymentList
                    key={id}     // I have tried giving 'i' also and tried creating random strings as unique id but none of them is working
                    priceId={id}
                    priceInfo={priceInfo}
                    recommended={false}
                  />
                </>
              ))}
            </div>
          </Col>
         
        </Row>
      </div>
    </>
  );
};

export default PaymentPackages;

Error is with the PaymentList if i delete it then there is no error but how can i solve this warning i don't know what i am doing wrong.

Answer 1

The key needs to be on the outermost element. In your case, the outermost element is a fragment. So either delete the fragment if it's not needed:

{paymentPlan1.map(({ priceInfo, id }, i) => (
  <PaymentList
    key={id}
    priceId={id}
    priceInfo={priceInfo}
    recommended={false}
  />
))}

Or move the key up to the fragment (you need to use the longhand fragment syntax in order to give it a key):

{paymentPlan1.map(({ priceInfo, id }, i) => (
  <React.Fragment key={id}>
    <PaymentList
      priceId={id}
      priceInfo={priceInfo}
      recommended={false}
    />
  </React.Fragment>
))}