react-data-table-components error warning: react does not recognize the `sortActive`

Question

I am using react-data-table-components and just following the instruction given by the documentation, but it's showing me an error (some of it is in text below):

Error

Below is the sample code I copied in the documentation:

import DataTable from 'react-data-table-component';

const App = () => {

  const columns = [
      {
          name: 'Title',
          selector: row => row.title,
      },
      {
          name: 'Year',
          selector: row => row.year,
      },
  ];
  const data = [
      {
          id: 1,
          title: 'Beetlejuice',
          year: '1988',
      },
      {
          id: 2,
          title: 'Ghostbusters',
          year: '1984',
      },
  ]

  return (
    <>
        <DataTable
            columns={columns}
            data={data}
        />
    </>
  )
}

export default App

Below is the package.json file:

package.json

These are the errors showing in my console:

StyledComponent.ts:159 styled-components: it looks like an unknown prop "responsive" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

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.

react-dom.development.js:86 Warning: Received false for a non-boolean attribute dense.

react-dom.development.js:86 Warning: React does not recognize the fixedHeader prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase fixedheader instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Answer 1

I fixed the issue by downgrading my version of styled-components to v5.3.3, as @aldwinp35 commented:

The code is correct. What happens is that react-data-table-component is using an old version of styled-components. So, to remove the errors downgrade styled-components to v5.3.3. Also, there's a PR on react-data-table-component repository for this problem, but it hasn't been merged yet.

Answer 2

If you have a problem with styled-components like this:

StyledComponent.ts:142 styled-components: it looks like an unknown prop "logo" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via <StyleSheetManager shouldForwardProp={...}> (connect an API like @emotion/is-prop-valid) or consider using transient props ($ prefix for automatic filtering.)

If you send a prop into styled div from styled-components, you must send prop to styled-component back with '$'. For instance: <StyledSection $logo='true'/>

Answer 3

Byron Escobar is absolutely correct. Downgrading styled-components solves the problem. However, I'd like to point out that downgrading to version 5.3.11 (which is the latest release of version 5) instead of 5.3.3, also solves the problem. At least it did in my case. In my case, the error was:
Warning: React does not recognize the `fixedHeader` prop on a DOM element

If you take a look at https://styled-components.com/releases you'll see that release 6 of styled-components has breaking changes. That's possibly why when you use react-data-table-component with styled-components version 6, errors are showing in your console.

Also note that if you install react-data-table-component, without explicitly specifying the version of styled-components, then by default, react-data-table-component pulls in styled-components version 6. This can be verified by viewing the package.json file.

So, to downgrade styled-components, I had to:
npm uninstall react-data-table-component styled-components
and then
npm install react-data-table-component styled-components@5
That fixed the issues for me.