Material Ui divider error (The above error occurred in the <hr> component)

Question

import React from 'react'
import styles from '../style'
import messages from './message'
import withStyles from 'hoc/withStyles'
import withIntl from 'hoc/withIntl'
import sports from 'static/home/sports.png'
import compose from 'recompose/compose'
import Divider from '@material-ui/core/Divider'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
function Sports ({ classes, intl }) {
  return (
    <Divider>
      <List>
        <ListItem>
          <div className={classes.box}>
            <h1>{intl.formatMessage(messages.sports)}</h1>
            <img src={sports} alt={'sports'} className={classes.img}/>
            <h2 className={classes.sports}>{intl.formatMessage(messages.sports)}</h2>
            <h3>{intl.formatMessage(messages.text)}</h3>
          </div>
        </ListItem>
      </List>
    </Divider>
  )
}

export default compose(withIntl(), withStyles(styles))(Sports)

The above error occurred in the
component: in hr (created by Divider) in Divider (created by WithStyles(Divider)) in WithStyles(Divider) (created by Sports) in Sports (created by WithStyles(Sports)) in WithStyles(Sports) (created by InjectIntl(WithStyles(Sports))) in InjectIntl(WithStyles(Sports)) (created by Content) in div (created by Content) in Content (created by WithStyles(Content)) in WithStyles(Content) (created by Information) in div (created by Information) in Information (created by WithStyles(Information)) in WithStyles(Information) (created by HomePage) in HomePage (created by InjectIntl(HomePage)) in InjectIntl(HomePage) (created by Route) in div (created by MainLayout) in div (created by ElementWrapper) in ElementWrapper (created by Element) in Element (created by MainLayout) in MainLayout (created by WithStyles(MainLayout)) in WithStyles(MainLayout) (created by mapProps(WithStyles(MainLayout))) in mapProps(WithStyles(MainLayout)) (created by getContext(mapProps(WithStyles(MainLayout)))) in getContext(mapProps(WithStyles(MainLayout))) (created by Route) in Route (created by PageRoute) in PageRoute (created by Component) in Switch (created by Component) in Component (created by Application) in Application (created by Connect(Application)) in Connect(Application) (created by lifecycle(Connect(Application))) in lifecycle(Connect(Application)) (created by Connect(lifecycle(Connect(Application)))) in Connect(lifecycle(Connect(Application))) (created by InjectIntl(Connect(lifecycle(Connect(Application))))) in InjectIntl(Connect(lifecycle(Connect(Application)))) (created by Route) in Route (created by withRouter(InjectIntl(Connect(lifecycle(Connect(Application)))))) in withRouter(InjectIntl(Connect(lifecycle(Connect(Application))))) (created by Chain) in MuiThemeProviderOld (created by Chain) in JssProvider (created by Chain) in Router (created by Chain) in IntlProvider (created by Connect(IntlProvider)) in Connect(IntlProvider) (created by Chain) in Provider (created by Chain) in Chain (created by Component) in AppContainer (created by Component) in Component
React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.

https://material-ui.com/api/divider/ -here is the link where you can check the API , I tried to use Divider component from material ui , but got this issue , why does it occur ? Above you can see snippet of code by which I want to use Divider and also error with all stack

Mike Airey Mike Airey · Accepted Answer · 2018-12-10T21:54:52

The Material UI Divider component is just a horizontal line, so it shouldn't have any children.

Instead of this

<List>
    <ListItem>
        <div className={classes.box}>
            <h1>{intl.formatMessage(messages.sports)}</h1>
            <img src={sports} alt={'sports'} className={classes.img}/>
            <h2 className={classes.sports}>{intl.formatMessage(messages.sports)}</h2>
            <h3>{intl.formatMessage(messages.text)}</h3>
        </div>
    </ListItem>
    <Divider absolute/>
</List>

try this:

<List>
    <ListItem divider>
        <div className={classes.box}>
            <h1>{intl.formatMessage(messages.sports)}</h1>
            <img src={sports} alt='sports' className={classes.img}/>
            <h2 className={classes.sports}>{intl.formatMessage(messages.sports)}</h2>
            <h3>{intl.formatMessage(messages.text)}</h3>
        </div>
    </ListItem>
</List>

Note the divider prop on ListItem, which automatically places a Divider line after the ListItem's content.

Material Ui divider error (The above error occurred in the <hr> component)

2 Answers