Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Warning: Each child in a list should have a unique "key" prop. #306

Closed
softmarshmallow opened this issue May 26, 2023 · 1 comment
Closed

Comments

@softmarshmallow
Copy link

With NextJS, InfiniteScroll throws unrelatable warning.

Check the render method of `InfiniteScroll`. It was passed a child from Page. See https://reactjs.org/link/warning-keys for more information.
    at InfiniteScroll (webpack-internal:///../node_modules/react-infinite-scroller/dist/InfiniteScroll.js:31:5)
    at main
    at eval (webpack-internal:///../node_modules/@emotion/react/dist/emotion-element-6a883da9.browser.esm.js:57:66)
function Demo(){
    // .....
    return (
        <InfiniteScroll
          pageStart={pageStart}
          hasMore={data.hasMore}
          loadMore={() => {
            if (data.loading) return;
            update.loadMore();
          }}
          useWindow={false}
          getScrollParent={() => document.querySelector("body")}
          loader={
            <>
              {data.loading && (
                <div className="loader" key={0}>
                  Loading ...
                </div>
              )}
            </>
          }
        >
          <div className="grid" key="grid">
            {data.files.map((file) => (
              <Link
                key={file.id}
                href={{
                  pathname: "/community/file/[id]",
                  query: {
                    id: file.id,
                  },
                }}
              >
                <div>
                  <FileCard {...file} />
                </div>
              </Link>
            ))}
          </div>
        </InfiniteScroll>
    )
}
@softmarshmallow
Copy link
Author

Ansering myself.

You can't have empty fragment as a loader.

Key Warning

<InfiniteScroll
       loader={
            <>
              {data.loading && (
                <div className="loader" key={0}>
                  Loading ...
                </div>
              )}
            </>
          }
>

Fixed

<InfiniteScroll
       loader={
              data.loading && (
                <div className="loader" key={0}>
                  Loading ...
                </div>
              )
          }
>

ref: oVirt/ovirt-web-ui#562 (comment)

softmarshmallow added a commit to gridaco/code that referenced this issue May 26, 2023
softmarshmallow added a commit to gridaco/grida that referenced this issue Dec 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant