[FIXED] How to fix Warning: Each child in a list should have a unique "key" prop. in React native?

Issue

I have values ​​in an array object called farms. In this case, we are using the farms.map function. However, this warning occurred, and when I searched the documentation, it was telling me to write a unique value for key.

Warning: Each child in a list should have a unique "key" prop. in React native?

So I wrote v.placeId in the key in the TargetCon component, but the warning was not resolved. How do I fix it?

this is my code

    farms = [
    {
        placeId: 272,
        name: 'hamburger',
    },
    {
        placeId: 273,
        name: 'coffee',
    },
    ];

    const TargetFarm = () => {
    const {farms} = useSelector((state: RootState) => state.post);

    return (
        <SeCotainer platform={tablet}>
        {farms.map(v => {
            return (
            <>
                <TargetCon key={v.placeId.toString()}>
                <TargetTxt platform={tablet}>{v.name}</TargetTxt>
                </TargetCon>
            </>
            );
        })}
        </SeCotainer>
    );
    };

    export default TargetFarm;

Solution

Add the key attribute in root element within the loop

return (
        <React.Fragment  key={v.placeId.toString()}>
            <TargetCon>
                 <TargetTxt platform={tablet}>{v.name}</TargetTxt>
            </TargetCon>
        </React.Fragment>
);

Answered By - Sachila Ranawaka
Answer Checked By - - Clifford M. (ReactFix Volunteer)