ListItem doesn't render properly with CSS when written in React.Fragment

1

I have this:

<List>
  <ListItem title="Hello World" />
</List>

This will work perfect.

I have this:

<List>
    <React.Fragment>
      <ListItem title="Hello World" />
    </React.Fragment>
</List>

This will render the item like:

  • Hello World

    Basically I want to achieve this:

      return (
    <List className="list-orders-list">
      {
        items.map(item => {
          const { date, po } = item
          return (
            <React.Fragment key={date}>
              <ComponentA date={date} />
              <ComponentB po={po} />
            </React.Fragment>
          )
        })
      }
    </List>
  )

    Under ComponentA and B there is a ListItem.

    BTW when using groupTitle it works

    • 2

    I solved this issue by replacing the React.Fragment with ListGroup.

    3

    Try wrapping it with ul:

    <List>
  <ul>
    <React.Fragment>
      <ListItem title="Hello World" />
    </React.Fragment>
  </ul>
</List>