Warning "Unknown prop nestedLevel on <div> tag"

[TarikHuber]

Problem description

Warning "Unknown prop nestedLevel on

tag" when adding a Subheader to nestedItems of a ListItem

Minimally-working code that reproduces the issue

<List>
                <Subheader>Nested List Items</Subheader>
                <ListItem
                  primaryText="Inbox"
                  leftIcon={<ContentInbox />}
                  initiallyOpen={true}
                  primaryTogglesNestedList={true}
                  nestedItems={[
                    <Subheader key={0}>Test</Subheader>,
                    <ListItem
                      key={1}
                      primaryText="Starred"
                      leftIcon={<ActionGrade />}
                    />,


                  ]}
                />
              </List>

Versions

• Material-UI: 0.17.1
• React: 15.x
• Browser: Chrome

[TarikHuber]

The same issue happens if you put Divider in the nestedItems:

<List>
                <Subheader>Nested List Items</Subheader>
                <ListItem
                  primaryText="Inbox"
                  leftIcon={<ContentInbox />}
                  initiallyOpen={true}
                  primaryTogglesNestedList={true}
                  nestedItems={[
                    <Divider key={0}/>,
                    <ListItem
                      key={1}
                      primaryText="Starred"
                      leftIcon={<ActionGrade />}
                    />,


                  ]}
                />
              </List>

[daralion]

#5019
Just wrap the subheader inside a ListItem, and remove the padding and margins in the ListItem's style. I had a similar issue with buttons and that's what I did

[TarikHuber]

Thx :) I'll try it ASAP

[TarikHuber]

@daralion Unfortunately if I try that with the Divider I get him without error messages to the nested items but he becomes then ListItem behaviors like changing background color on hover and beeing selectable/touchable.

[daralion]

I'm not sure about the style, but the hover can be disabled by setting the disabled attribute to true in the ListItem.

[ChrisHaPunkt]

Same here.

v0.18.0 with React v15.5.4

Workaraound from @daralion worked for me

[oliviertassinari]

@TarikHuber We have been porting the component on the v1-beta branch. We have reimplemented it from the ground-up.

We encourage people starting with Material-UI to go with v1-beta. The master branch is in a low maintenance mode. We don't plan any work on it. However, we still do our best to review and merge pull requests that fix bugs on this branch.

[TarikHuber]

@olivertassinari thank you 😄 We will use the beta version for our new project and see how it works out. Unfortunatelly our production project needs some other libraries that are not prepared for the V1. But as we did with react 16 we will try to make as much PRs as possible to migrate the projects. Thank you again for your time and this awesome project 😄