react key prop error even tho keys are set

Question

I'm getting this error

I put the key prop everywhere they are needed:

lists
map functions

but the error is still occurring, as you can see it says that error is occurring in method of "Rendered Route" I'm not sure what kind of component is that maybe it's a component from React-Router but this error is occurring only on my index page nowhere else...

I can't find the issue anywhere even in the index page, every list items has it's own key prop and Layout page look like this:

const Layout: FC = () => {
  const { data } = useQuery<response>(
    "authData",
    {
      queryFn: () => axios.get(`/api/auth/user`),
      retry: false,
      refetchOnWindowFocus: false
    }
  )

  if (data) {
    console.log(data);
    return (
      <>
        <UserContext.Provider value={data.data}>
            <Navbar/>
            <Outlet />
        </UserContext.Provider>
      </>
    );
  }
  return (
    <>
      <Navbar/>
      <Outlet />
    </>
  );
};

This is a index page where the error is probably occurring not sure why.

export const Index = () => {
  const { fetchNextPage, hasNextPage, data, refetch, error } = useInfiniteQuery(['posts'], ({ pageParam = '' }) => fetchPosts({ pageParam }), {
    getNextPageParam: (lastPage, allPages) => lastPage.nextId ?? false,
  })
  
  const { inView, ref } = useInView()
  useEffect(() => {
    if (inView && hasNextPage) {
      fetchNextPage()
    }
  }, [inView, hasNextPage])
  
  const user = useContext(UserContext);  


  if (data && data?.pages[0].posts.length > 0) {
    return (
      <main className="flex p-1 md:p-4 mr-auto ml-auto max-w-[750px] lg:col-start-2">
        <section className="flex flex-col gap-2 pt-12 w-full ">
          {data.pages.flatMap((page, i) => {
            return (
              <ul className="flex flex-col gap-2" key={i}>
                {page.posts.map((ele) => {
                  return 
                    <li key={ele.id}>
                      <PostCard
                        key={ele.id}
                        cardType=""
                        likedBy={ele.likedBy}
                        liked={ele.likedBy.some((e) => {
                          return e.id == user.id
                        })}
                        author={ele.author}
                        comments={ele._count.comments > 0
                          ? ele._count.comments
                          : 0
                        }
                        community={ele.community}
                        refetch={refetch}
                        content={ele.content}
                        id={ele.id}
                        likeCount={ele._count.likedBy}
                        title={ele.title}
                        type={ele.type}
                      />
                    </li>
                })}
              </ul>
            )
          })}
          <div
            className="mx-auto flex max-w-6xl justify-center opacity-0"
            ref={ref}
          />
        </section>
      </main>
    );
  }

What are you rendering into the `Outlet`? Can you [edit] the post to include a more complete [mcve] so we can see where and how `Layout` is being used, and any relevant code where you are mapping JSX and using React keys? — Drew Reese, Aug 31 '23 at 16:32
"This is [where] the error is probably occuring" is unfortunately not good enough: you have some [(re)searching and debugging left to do](/help/how-to-ask) to find the _actual_ place things go wrong. Start incrementally commenting off code to find at what point the error goes away, so you find the real source of the problem. — Mike 'Pomax' Kamermans, Aug 31 '23 at 16:47
I did removed everything where I put any map function or smth and nothing has changed the issue is in component which I didn't created — TheSillus, Aug 31 '23 at 16:48
if nothing has changed, then you haven't commented off the problem yet. So keep going until you have your [mcve]. — Mike 'Pomax' Kamermans, Aug 31 '23 at 16:48

score 1 · Answer 1 · answered Aug 31 '23 at 17:32

 <li key={ele.id}>
    <PostCard
                    key={ele.id}
                    cardType=""
                    likedBy={ele.likedBy}
                    liked={ele.likedBy.some((e) => {
                      return e.id == user.id
                    })}
                    author={ele.author}
                    comments={ele._count.comments > 0
                      ? ele._count.comments
                      : 0
                    }
                    community={ele.community}
                    refetch={refetch}
                    content={ele.content}
                    id={ele.id}
                    likeCount={ele._count.likedBy}
                    title={ele.title}
                    type={ele.type}
                  />
                </li>

I think each key given to child elements should be unique. Returned in map function

element and its child have the same keys.

score 0 · Answer 2 · answered Aug 31 '23 at 17:49

I'd suggest you prefix key values with where you use them, e.g.

items.map((item: Item) => <li key={`article-${item.id}`}>{item.text}</li>)

This makes sure you're not reusing the same key somewhere else on the same page to ensure it's unique in the whole app (could happen that the id is used in two different loops I guess).

I can't exactly see where you add the routes (navigation) but there also you should make sure the ke is really unique, either you forgot to set a key there or it's not unique...

Aren't you using <Route /> somewhere to dynamically create routes? Probably there you messed up the key attribute.

To wildly guess check inside <Navbar />, feels like there your Nav links are generated...?

react key prop error even tho keys are set

2 Answers2