CODEWITHSUNDEEP
reactjsmaterial-ui
typos
typos

Reputation: 6662

nestedItems[0] of type `array` supplied to `ListItem` expected a single ReactElement

I want to use a List from Material-UI in React, where lists also have nested items. I have a code like this:

<List>
    {this.state.categories.map(category => {
        return (
            <ListItem key={category.categoryID} 
                      primaryText={category.name}
                      nestedItems={[
                          category.subcategories.map(subcat => {
                              return (
                                  <ListItem key={subcat.subcatID}
                                            primaryText={subcat.name} />
                              )
                          })
                      ]} />
        )
    })}
</List>

The problem is that although this code works and I see everything displayed, I get an error in the console. The error that I get is the identical one from the title. I believe the problem is that in nestedItem each of the ListItems needs to be separated by a comma, but simply if I put a comma after the last ListItem in the code, I get a syntax error. Any idea how to work around the problem?

Upvotes: 0

Views: 132

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

Since map return an array, there one excess array:

    <ListItem key={category.categoryID} 
              primaryText={category.name}
              nestedItems={ //here no need an array. This will be nestedItems=[[]]
                  category.subcategories.map(subcat => {
                      return (
                          <ListItem key={subcat.subcatID}
                                    primaryText={subcat.name} />
                      )
                  })
              } />

Upvotes: 1

Related Questions