Layout warns when wrapping Panel/NavDrawer/Sidebar in custom component

[InfernoZeus]

I'm trying to wrap the NavDrawer in a custom component which accepts a list of menu items. When doing this, Layout warns that it only accepts Panel as a child, with optional NavDrawer and Sidebar:

Warning: Failed prop type: Layout should have a Panel for a child, optionally preceded by a NavDrawer and/or followed by a Sidebar.
in Layout (created by Themed Layout)
in Themed Layout (created by App)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router

My layout has a NavMenu component, which is causing the issue:

...
<Layout>
  <NavMenu items={menuItems}></NavMenu>
...
class NavMenu extends React.Component {
  render () {
    return <NavDrawer ...>{generatedMenuItems}</NavDrawer>;
  }
}

Is this likely to cause issues? If not, is there be some way to disable the warning?

[tsega]

I just had the same kind of error. I believe react-toolbox is explicitly expecting either a NavDrawer or Sidebar to precede a Panel, any other component would output that warning. You would also get a warning if you changed the order of the components, to something like Panel, Sidebar & then NavDrawer.

Note: Explicitly importing the components as follows:

import Layout from 'react-toolbox/lib/layout/layout';
import NavDrawer from 'react-toolbox/lib/drawer';
import Panel from 'react-toolbox/lib/layout/panel';

as opposed to importing them as in the React-Toolbox example:

import { Layout, NavDrawer, Panel, Sidebar } from 'react-toolbox';

would also give you the same warning.

[InfernoZeus]

Seems to me that this error message is overly aggressive, treating the developer as a bit of an idiot.

[asprouse]

I just ran into this message. There should be a better way than checking the component name:

https://github.com/react-toolbox/react-toolbox/blob/dev/components/layout/Layout.js#L12

One way to work around it would be to set your displayName to NavDrawer or Sidebar. However this becomes tricky if you are using any sort of higher order components such as redux connect. It also defeats the debugging utility of component names. I would propose removing this warning all together it is pretty visually obvious when the components are in the wrong order.

What do you think? I can put together a PR if you guys agree.

[InfernoZeus]

I'm leaning towards removing the warning entirely. You should be able to
notice if your layout isn't working properly.

On 24 Aug 2016 3:48 pm, "Andrew Sprouse" [email protected] wrote:

I just ran into this message. There should be a better way than checking
the component name:

https://github.com/react-toolbox/react-toolbox/blob/
dev/components/layout/Layout.js#L12

One way to work around it would be to set your displayName to NavDrawer or
Sidebar. However this becomes tricky if you are using any sort of higher
order components such as redux connect. It also defeats the debugging
utility of component names. I would propose removing this warning all
together it is pretty visually obvious when the components are in the wrong
order.

What do you think? I can put together a PR if you guys agree.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#641 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AARUHBOA_PPFVaKbIVNVtPLldeIowKPDks5qjEu9gaJpZM4JMbgP
.

[javivelasco]

Agree, if the warning it's annoying we can just remove it. It's a matter of styling and you may guess it's wrong as @InfernoZeus Enough warning in the docs IMO