React does not recognize the `sortActive` prop on a DOM element.

[Anandhu1991]

Issue Check list

In console, gettting the following error in browser React does not recognize the sortActive prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase sortactive instead. If you accidentally passed it from a parent component, remove it from the DOM element.

To Reproduce

Steps to reproduce the behavior: Use Sort option in columns

Expected behavior

No console errors

Versions (please complete the following information)

• React 18
• Styled Components
• OS: ubuntu
• Browser chrome

[Anandhu1991]

duplicate issue

[EdvinTr]

Any updates on this? The issue still persists for sortActive, minWidth and maxWidth even after #1154

[amirfaisalz]

any update on this?

[gergobalogh]

any news on this?

[jeppeliisberg]

I also have this issue after upgrading to react 18.

[SamuelDowse]

This is linked to the styled-components library, if you use styled-components version 5.x in your project, you won't get these errors, but if you use styled-components version 6.x and up you will see these errors. Either drop your styled-components version in your project, or wait for react-data-table-component to upgrade to styled-components version 6.

[farizrifqi]

any update? I am using NextJS & Tailwind

[korlog]

Any progress on this problem? Will it be resolved soon?

[ADTC]

This happens because the peer dependency of this project is "styled-components": ">= 4" instead of "styled-components": "^4.0.0" or "styled-components": "^5.0.0".

In my case it's not in package.json because it's a peer dependency. The package-lock.json already has version 6.x in it. However, running npm i styled-components@^5.0.0 replaces the 6.x version with the latest 5.x version.

It adds a bunch of new stuff though. Hopefully the maintainer can upgrade support to 6.x. Is it even possible to use this project without styled-components? I don't really use it for anything myself.

[legarnica]

This happens because the peer dependency of this project is "styled-components": ">= 4" instead of "styled-components": "^4.0.0" or "styled-components": "^5.0.0".

In my case it's not in package.json because it's a peer dependency. The package-lock.json already has version 6.x in it. However, running npm i styled-components@^5.0.0 replaces the 6.x version with the latest 5.x version.

It adds a bunch of new stuff though. Hopefully the maintainer can upgrade support to 6.x. Is it even possible to use this project without styled-components? I don't really use it for anything myself.

Thank You So Much. :)

[Lartaxx]

This happens because the peer dependency of this project is "styled-components": ">= 4" instead of "styled-components": "^4.0.0" or "styled-components": "^5.0.0".

In my case it's not in package.json because it's a peer dependency. The package-lock.json already has version 6.x in it. However, running npm i styled-components@^5.0.0 replaces the 6.x version with the latest 5.x version.

It adds a bunch of new stuff though. Hopefully the maintainer can upgrade support to 6.x. Is it even possible to use this project without styled-components? I don't really use it for anything myself.

How did you find the problem? I tried changing the dependency in my package-lock but it didn't change anything, I don't know how to fix it...

[ADTC]

I tried changing the dependency in my package-lock

Did you run npm i styled-components@^5.0.0? Check your package-lock file for which version is installed, but don't edit the file directly.

Be sure to restart your local dev server.

[Lartaxx]

I tried changing the dependency in my package-lock

Did you run npm i styled-components@^5.0.0? Check your package-lock file for which version is installed, but don't edit the file directly.

Be sure to restart your local dev server.

Re, i have the version 6 "styled-components": "^6.1.6" in y package, and in my package-lock i have :

"node_modules/react-data-table-component": {
            "version": "7.5.4",
            "resolved": "https://registry.npmjs.org/react-data-table-component/-/react-data-table-component-7.5.4.tgz",
            "integrity": "sha512-6DGVj3urJZfEEMuP652fSjxdRVKeyb+9d0YounVc+MX8jwoyXQW6KO10eyZqElE9QtVrKrCeJxR7vht9yxyJiw==",
            "dependencies": {
                "deepmerge": "^4.2.2"
            },
            "peerDependencies": {
                "react": ">= 16.8.3",
                "styled-components": ">= 4"
            }
        },

[ADTC]

Maybe you have another package that requires version 6 of styled components. That's a potential problem.

What's the result of you running npm i styled-components@^5.0.0?

[Lartaxx]

Oh it's good, thanks for your help ! Have a good day !

[mrwilbroad]

npm i styled-components@^5.0.0

this solution work fine for my project , i realize styled-component v5.x is the solution for DOM error happened in console

[jbetancur]

This should be resolved in 7.6.2

[ADTC]

@jbetancur can we update to styled-components v6 now?

[naviocean]

This should be resolved in 7.6.2

It isn't resolved in 7.6.2