react-dom.development.js:86 Warning: 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

[Arjunv17]

When I am using latest version that I am facing this issue. Please fix it and let me know any suggestion how can I fix this.

Thanks

Here Is my code : const columns = [ { name: 'Sr No.', selector: (row, index) => index + 1, }, { name: 'From', selector: (row) => row.from, }, { name: 'To', selector: (row) => row.to, }, { name: 'Date', selector: (row) => row.leave_date, }, { name: 'Leave Type', selector: (row) => row.type, }, { name: 'Message', selector: (row) => row.message, }, { name: 'Status', selector: (row) => row.status, },

];

         <DataTable
                  columns={columns}
                  data={data} // data on api response 
              />

[jbetancur]

See #1155 for status

[amirfaisalz]

any update on this? the issue still persist

[Arjunv17]

YES, this issue is still occurring.

react-dom.development.js:86 Warning: 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.

On Wed, Sep 13, 2023 at 2:47 AM Amir Faisal Z @.***> wrote:

any update on this? the issue still persist

— Reply to this email directly, view it on GitHub https://github.com/jbetancur/react-data-table-component/issues/1156#issuecomment-1716454543, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYABVZKNB6S7JUPXYWGZH3LX2DGNDANCNFSM6AAAAAA35L7NMM . You are receiving this because you authored the thread.Message ID: @.***>

[Arjunv17]

Fixed! Thanks for the help!!

On Fri, Sep 22, 2023 at 4:44 PM Samuel Jake Dowse @.***> wrote:

I've hit this issue as well, looks like it's caused by using styled-components library version 6.x. If you install @.*** it'll get rid of these errors.

Styled-components switched from camelCase to lowercase for their props, and react-data-table-component library will need updating to support @.***

— Reply to this email directly, view it on GitHub https://github.com/jbetancur/react-data-table-component/issues/1156#issuecomment-1731242570, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYABVZNTYSUZEIZB5E7BCTLX3VXH5ANCNFSM6AAAAAA35L7NMM . You are receiving this because you authored the thread.Message ID: @.***>

[SamuelDowse]

Not sure why my comment deleted, but to summarise for anyone else looking at this thread in the future until this bug is resolved.

You'll need to use styled-components version 5.x not ^6.x. React-Data-Table-Component needs updating to use the latest styled-components library.

[amirfaisalz]

thanks for the help @SamuelDowse, after downgrade styled-component to version 5, the warning is gone.

[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.