davidhu2000 / react-spinners

A collection of loading spinner components for react
https://www.davidhu.io/react-spinners
MIT License
3.03k stars 263 forks source link

How to solve EmotionCssPropInternal unique "key" prop issue #413

Closed KoushikMVN closed 2 years ago

KoushikMVN commented 3 years ago

Hi! i am using GridLoader in next js , but i get a error of Each child in a list should have a unique "key" prop warning

import React from "react";
import { css } from "@emotion/core";
import GridLoader from "react-spinners/GridLoader";
import Proptypes from 'prop-types'
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 150px auto;
  border-color: red;
`;
const PageLoader = Props => {
    return (
        <div className="sweet-loading">
            <GridLoader
                css={override}
                size={20}
                color={"#62842C"}
                loading={Props.loading}
            />
        </div>
    );
};

PageLoader.prototype = {
    loading: Proptypes.bool.isRequired
}

export default PageLoader;

i am using this code to load Gridloader but i face

Warning: Each child in a list should have a unique "key" prop.
    at span
    at EmotionCssPropInternal
    at Loader

this warning, how can i solve it ?

davidhu2000 commented 3 years ago

hmm, i just ran npx create-next-app and imported GridLoader, and not seeing the issue. Can you provide more code to help reproduce?

davidhu2000 commented 2 years ago

this issue should be resolved since emotion is removed