react-data-table-component: React does not recognize the `sortActive` prop on a DOM element.
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
About this issue
- Original URL
- State: closed
- Created 10 months ago
- Reactions: 7
- Comments: 19 (5 by maintainers)
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.jsonbecause it’s a peer dependency. Thepackage-lock.jsonalready has version 6.x in it. However, runningnpm i styled-components@^5.0.0replaces 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.This should be resolved in 7.6.2
this solution work fine for my project , i realize styled-component v5.x is the solution for DOM error happened in console
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.