Each child in a list should have a unique "key" prop for subchild DOM elements

Question

I am trying to map a return statement with multiple child components and getting ESLint error

    console.error
      Warning: Each child in a list should have a unique "key" prop.

This is my React Code:

const EmployeeDetails = ({ employeeid }) => {
    return (
            <div>
            <strong>Employee Overview Details</strong>
            </div>
            <div className="flex-container" key="test">
            {employeeOverviewDetails.map((detail, index) => {
            return (
            <>
            {detail.heading === 'Employee ID' && (
            <div
                className="indiviual-flex"
                key={index}
                >
                <small key={detail.heading}>
                {detail.heading}
                </small>
                <br />
                <strong key={detail.value}>
                {employeeid}
                </strong>
            </div>
            )}
            {detail.heading !== 'Employee ID' && (
            <div
                className="indiviual-flex"
                key={detail.heading}
                >
                <small>{detail.heading}</small>
                <br />
                <strong>{detail.value}</strong>
            </div>
            )}
            </>
            )
            })}
            </div>
    )
}

I am passing key for every element and yet ESLint keeps warning about unique "key" prop

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — Manas Khandelwal, Jun 18 '21 at 07:47
And the official documentation on topic is clear on this https://reactjs.org/docs/lists-and-keys.html#keys — Tomi Kokkonen, Jun 18 '21 at 07:49
I am seen the docs. Issue/warning still persists even after adding the `key` property — Ayman Patel, Jun 20 '21 at 12:35

Manas Khandelwal · Answer 1 · 2021-06-18T07:55:34.970

You are missing a fragment:

const EmployeeDetails = ({ employeeid }) => {
  return (
    <>
      <div>
        <strong>Employee Overview Details</strong>
      </div>
      <div className="flex-container" key="test">
        {employeeOverviewDetails.map((detail, index) => {
          return (
            <>
              {detail.heading === "Employee ID" && (
                <div className="indiviual-flex" key={index}>
                  <small key={detail.heading}>{detail.heading}</small>
                  <br />
                  <strong key={detail.value}>{employeeid}</strong>
                </div>
              )}
              {detail.heading !== "Employee ID" && (
                <div className="indiviual-flex" key={detail.heading}>
                  <small>{detail.heading}</small>
                  <br />
                  <strong>{detail.value}</strong>
                </div>
              )}
            </>
          );
        })}
      </div>
    </>
  );
};

You cannot have 2 elements side by side in React, either use this syntax

<> </>

to wrap around the elements which are side by side or use you can import Fragment from React like this:

import { Fragment } from "react";

And then wrap the elements which are side by side with Fragment like this:

<Fragment></Fragment>

or if u don't want to import Fragment you can also use React.Fragment. but you need to import react for this.

Each child in a list should have a unique "key" prop for subchild DOM elements

1 Answers1