Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop

Question

I'm having an issue with my React code.

Here's my code:

const App = () => {
  const sectionData = [
    {
      id: 1,
      rev: true,
      path: "/about",
      title: "about us",
      bgColor: "#D6D6D6",
      imgURL:
        "https://images.pexels.com/photos/1170412/pexels-photo-1170412.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
      heading: "The Scroll Project",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?`,
    },
    {
      id: 2,
      rev: false,
      path: "/services",
      title: "our services",
      bgColor: "#FACACA",
      imgURL:
        "https://images.pexels.com/photos/3935702/pexels-photo-3935702.jpeg?cs=srgb&dl=pexels-leah-kelley-3935702.jpg&fm=jpg",
      heading: "The. Best. Service. Ever.",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?
      
      Deserunt recusandae tempore veritatis consectetur perferendis inventore quibusdam, suscipit sed saepe laudantium distinctio impedit, temporibus praesentium fugiat.Placeat libero maxime nobis minus perspiciatis laborum eligendi magnam ea ?
      
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Est molestias aperiam doloremque et sit, necessitatibus officia unde. Ex quod, illum facilis necessitatibus id inventore maxime, adipisci aut labore nihil eligendi ipsa! Assumenda enim nostrum blanditiis atque suscipit, exercitationem amet necessitatibus.`,
    },
    {
      id: 3,
      rev: true,
      path: "/tours",
      title: "our tours",
      bgColor: "#CAB3B3",
      imgURL:
        "https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?cs=srgb&dl=pexels-canva-studio-3153198.jpg&fm=jpg",
      heading: "Low Cost yet Satisfactory",
      definition: `Lorem ipsum dolor sit amet consectetur, adipisicing elit.Ipsa accusamus excepturi deleniti reiciendis, modi voluptatibus quam facere voluptatem iste, minima expedita sint soluta ?`,
    },
  ];
  return (
    <Router>
      <div className="app">
        <Navbar />
        <Switch>
          <Route exact path="/">
            <Main />
          </Route>

          <Switch>
            {sectionData.map((section) => {
              return (
                <Route path={section.path}>
                  <Section data={section} key={section.id} />
                </Route>
              );
            })}
          </Switch>
        </Switch>
      </div>
    </Router>
  );
};

As you can see, I have the key set to ={section.id} in the map function. It even shows it on the React dev tools: enter image description here enter image description here

I'm using Styled Components for the Section so I'm not sure if it has anything to do with the error. Is the React Router contributing to the issue?

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) — DecPK, Jul 28 '21 at 02:57

score 1 · Answer 1 · answered Jul 28 '21 at 02:58

1

{sectionData.map((section, index) => {
              return (
                <Route key={index} path={section.path}>
                  <Section data={section} key={section.id} />
                </Route>
              );
            })}

Whenever creating an array of JSX, always add key attribute.

answered Jul 28 '21 at 02:58

Nitesh

1,490
1
12
20

see [why you shouldn't use the index as a key prop](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js). So this answer is not correct or I'd say not recommended. – DecPK Jul 28 '21 at 03:18
@decpk: Thanks for sharing this. I went thru this and understood if a particular array is dynamic (adding new elements, deleting, or modified on the run), then it is not recommended way as keys values can change. But for a static array, it is totally fine. I realize, here the user is creating routes which mostly is static. Therefore, I think this approach is still recommended and good to go. But since here id is already available in the array, it is equally good to go with id. – Nitesh Jul 28 '21 at 03:33
Apologies, I didn't go thru OP's and your code. You are perfectly right and yes we can use `id` as a `key` here. OP just put `key` on the wrong element. – DecPK Jul 28 '21 at 04:09

score 0 · Accepted Answer · answered Jul 28 '21 at 03:22

You need key on your Route JSX tag. It is the child which the list is iterating over. Section is just one child component in each Route Component.

  <Switch>
            {sectionData.map((section) => {
              return (
                <Route path={section.path} key={section.id}>
                  <Section data={section} />
                </Route>
              );
            })}
          </Switch>

Why you shouldn't use index as key

Console error: index.js:1 Warning: Each child in a list should have a unique "key" prop

2 Answers2