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 hereenter 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?

Answer 1

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