carbon: React does not recognize the `isSideNavExpanded` prop on a DOM element

What package(s) are you using?

carbon-components - 10.6.1 (latest)
carbon-components-react - 7.6.1 (latest)

Detailed description

Describe in detail the issue you’re having.

It looks like https://github.com/carbon-design-system/carbon/pull/3626 introduced a warning about unrecognized props being applied to DOM elements.

Warning: React does not recognize the `isSideNavExpanded` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `issidenavexpanded` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by Context.Consumer)
    in Link (created by Context.Consumer)
    in NavLink (created by Link)
    in Link (created by ForwardRef(SideNavMenuItem))

here, the props (including isSideNavExpanded) are being spread onto element: https://github.com/carbon-design-system/carbon/blob/99f12f98e226b2ab1872b7379167d827e4fe7bd5/packages/react/src/components/UIShell/Link.js#L19

Is this issue related to a specific component?

What did you expect to happen? What happened instead? What would you like to see changed?

The Carbon components should not be passing through all props like this, instead they should filter out those that are not supported / relevant for the target component / element, or explicitly pass only the expected props to their children.

Having these warnings causes a lot of noise in logs, both in the browser and in tests, making it harder to spot / debug genuine problems.

Steps to reproduce the issue

This can be reproduced by running the storybook in dev mode

from packages/react: npm run storybook
navigate to http://localhost:9000/?path=/story/ui-shell--fixed-sidenav
see the warning in the browser console

Please create a reduced test case in CodeSandbox

Style and vanilla JS: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox

React: https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

Screenshots or code
Notes

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 21 (11 by maintainers)

Most upvoted comments

If I understood it correctly this should be the link https://codesandbox.io/s/magical-clarke-ldj9i?file=/src/index.js

kubijo on Mar 19, 2021

@kubijo would you mind sharing a reduced test case in a ZIP if Code Sandbox is still not playing nice?

emyarod on Mar 19, 2021

Hi @joshblack , I’m also having the issue with “carbon-components”: “10.12.0”, “carbon-components-react”: “7.12.0”

hsu022210 on Jun 5, 2020

@joshblack Hi josh,

I still having the same problem with ts 😢

What package(s) are you using?

carbon-components - 10.10.1
carbon-components-react - 7.10.1
types/carbon-components-react - 7.6.15

Detailed description

console

Warning: React does not recognize the `isSideNavExpanded` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `issidenavexpanded` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in a (created by Link)
    in Link (created by ForwardRef(SideNavMenuItem))
    in li (created by ForwardRef(SideNavMenuItem))
    in ForwardRef(SideNavMenuItem) (at Sidebar/index.tsx:26)
    in ul (created by SideNavItems)
    in SideNavItems (at Sidebar/index.tsx:24)
    in nav (created by ForwardRef(SideNav))
    in ForwardRef(SideNav) (at Sidebar/index.tsx:23)
    in Sidebar (at Header/index.tsx:26)
    in header (created by Header)
    in Header (at Header/index.tsx:15)
    in Header (at Layout/index.tsx:25)
    in div (at Layout/index.tsx:24)
    in render (created by HeaderContainer)
    in HeaderContainer (at Layout/index.tsx:16)
    in Layout (at Payment/index.tsx:62)
    in Payment (created by Context.Consumer)
    in Route (at App.tsx:34)
    in Route (at App.tsx:56)
    in Switch (at App.tsx:52)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.tsx:51)
    in ApolloProvider (at App.tsx:50)
    in App (at src/index.tsx:7)

using component

// isSideNavExpanded is props

<SideNav aria-label="Side navigation" isRail expanded={isSideNavExpanded}>
  <SideNavItems>
    <SideNavMenuItem href="" aria-current='page'>test</SideNavMenuItem>
  </SideNavItems>
</SideNav>

KimWooHyun on Mar 16, 2020

Apologies for the delay, I completely lost track of this one. I’ve just updated to 10.9.2/7.9.2 and confirmed it’s resolved 👍 Thanks

AlanGreene on Jan 27, 2020