React does not recognize the isSideNavExpanded prop on a DOM element

[AlanGreene]

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 #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:

carbon/packages/react/src/components/UIShell/Link.js

Line 19 in 99f12f9

return React.createElement(element, { ...rest, ref });

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

1. from packages/react: npm run storybook
2. navigate to http://localhost:9000/?path=/story/ui-shell--fixed-sidenav
3. 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

[joshblack]

Should be closed by #4349! Let me know if that isn't the case and I'd be happy to re-open 😄

[AlanGreene]

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

[KimWooHyun]

@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>

[alimuratumutlu]

Hi @joshblack ,

The error is going on. I'm using the following packages:

"carbon-components": "^10.11.2",
"carbon-components-react": "^7.10.2",
"carbon-custom-elements": "^1.0.0-beta.12",
"carbon-icons": "^7.0.7",

[AlanGreene]

@muratumutlu I'm not a Carbon developer. I'm just a user like you who reported an issue I found, and it was resolved for my use case in the versions I mentioned in my last comment.

You should probably open a new issue with details of what you're seeing, including a codesandbox reproducing it if possible. That will make it easier for the Carbon team to debug.

[alimuratumutlu]

Sorry @AlanGreene , I've seen your message about "it's resolved" and then I post this message. Now I'm changing my message. Thank you for the information.

[trusinaj]

Im having same issue as @KimWooHyun or @AlanGreene in version:
"carbon-components": "10.12.0",
"carbon-components-react": "7.12.0",

[hsu022210]

Hi @joshblack , I'm also having the issue with
"carbon-components": "10.12.0",
"carbon-components-react": "7.12.0"

[tw15egan]

Does anyone have a link to a reproducible example?

The example using isSideNavExpanded in storybook does not seem to be throwing that warning...

https://react.carbondesignsystem.com/iframe.html?id=ui-shell--sidenav-rail-w-header

[AlanGreene]

I'm not seeing the issue, but React only emits those warnings in dev mode so you'd need to run the storybook locally in dev mode to see it if it's happening there.

[zigzactly]

Hi there, i am also having this issue. I will see if i have the time to get a basic reproducible example, but im not doing anything differently from the storybook.

(Im a little behind on the versions)
"carbon-components": "^10.11.2",
"carbon-components-react": "^7.11.3",

[kubijo]

It's still there on

{
  "carbon-components": "^10.15.0",
  "carbon-components-react": "^7.15.0"
}

[dioslibre]

import PropTypes from "prop-types";

const SideNavChild = ({ children }) => {
  return children;
};

SideNavChild.propTypes = {
  isSideNavExpanded: PropTypes.bool,
};

const Sidebar = () => {
  return (
    <SideNav
      isFixedNav
      expanded={true}
      isChildOfHeader={false}
      aria-label="Legend"
      className="w-screen md:w-80 max-w-screen"
    >
      <SideNavChild>
             ...
      </SideNavChild>
    </SideNav>
  );
};

[tw15egan]

I've just tested locally in dev mode and on the deployed production version and I'm unable to reproduce this issue. My main recommendation is to ensure you are running the latest version of the components and see if it still exists. Closing this since I am unable to reproduce, but I will reopen if someone can provide a CodeSandbox reproducing this issue. Thanks!

[kubijo]

The way I see it:

• SideNavItems injects isSideNavExpanded into its children (I've got undefined in there)
• SideNavMenuItem spreads that into Link
• Link spreads it into anchor without catching isSideNavExpanded

[kubijo]

• I've looked into your official storybook site, but that doesn't shout probably because it's a production build.
• I've tried creating CodeSandbox, but it spouted strange errors about unknown/undefined elements on code that didn't seem to have any apparent problems & I don't really have time for debugging example sandbox without any prior experience with that tool.

I believe however that the message above does, however, explain the problem quite thoroughly & the fix could be as easy as catching the isSideNavExapnded in the UIShell/Links props destructuring … or not passing it there in the first place since the component doesn't really need it.

[tw15egan]

@kubijo Thanks for taking the time to investigate this. I'll make a PR to catch the isSideNavExpanded in the Link to avoid this warning.

[kubijo]

OK guys, the problem persists in 7.31.0 … I could probably redo my last report, but I believe that I've covered it in a pretty detailed manner, so could you please sift through the rest of the few components in the same way?

[kubijo]

For what it's worth, this is the tail of stack-trace that I get

---

Edit: found the culprit… it's about this line & the fact that our designers require some custom elements in the menus (titles).

You are injecting the prop to whatever gets into children.
While I do understand the simplicity-based reason for this choice, it's quite evidentially pretty clunky because you are making too
strong assumptions about usages.

Couldn't you use a React context and flip the solution to ask for value in components that might need it instead of forcing it upon everything?

---

For others … For now, I've been able to fix it this way

… or just wrap it in React.Fragment ;-)

[emyarod]

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

[kubijo]

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