Reactstrap: Warning: validateDOMNesting(...): <h5> cannot appear as a descendant of <p>.

[ethanharlig]

Issue description

• components: Card, CardBody, CardText, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText
• reactstrap version 5.0.0-alpha.4
• react version 16.2.0
• bootstrap version 4.0.0-beta.2

What is happening?

When using these combination of components, warnings are shown stating that DOM nesting is being violated since something like a ListGroupHeading (\

What should be happening?

I want to figure out how to properly use these components without violating DOM nesting.

Steps to reproduce issue

1. Implement a card in ReactJS using at least Card, CardBody, CardText, ListGroup, ListGroupItem, and ListGroupHeading.
2. See that these warnings are generated for each DOM nesting violation.
3. This does not just happen with an \

Error message in console

Warning: validateDOMNesting(...): <h5> cannot appear as a descendant of <p>.
    in h5 (created by ListGroupItemHeading)
    in ListGroupItemHeading (at home.js:24)
    in li (created by ListGroupItem)
    in ListGroupItem (at home.js:23)
    in ul (created by ListGroup)
    in ListGroup (at home.js:22)
    in p (created by CardText)
    in CardText (at home.js:21)
    in div (created by CardBody)
    in CardBody (at home.js:19)
    in div (created by Card)
    in Card (at home.js:18)
    in div (at home.js:16)
    in Home (created by Route)
    in Route (at App.js:17)
    in div (at App.js:15)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:14)
    in div (at App.js:12)
    in App (at index.js:9)

[TheSharpieOne]

Use the tag prop to change the DOM element which is rendered by the offending reactstrap component

[ethanharlig]

Sorry I'm new to React. What does that exactly mean? @TheSharpieOne

So if I have this code:

      <Card>
        <CardBody>
          <CardText>
            <ListGroup>
              <ListGroupItem>
                <ListGroupItemHeading>
                  Mumbo jumbo words go here
                </ListGroupItemHeading>
                <hr />
                <ListGroupItemText>
                  More text here!
                </ListGroupItemText>
            </ListGroup>
          </CardText>
        </CardBody>
      </Card>

where do I go from there?

[TheSharpieOne]

There are a few ways to fix this depending on what you are trying to do. My recommendation would be to not use CardText since the things you are putting in there are not text (they are a list which contains text).
Or you can use tag on ListGroupItemHeading to make it something other than an h5, but I am not sure what element you would want it to be.
Reactstrap makes it easier to use bootstrap in react/jsx, but really when designing the pages, you keep the final (bootstrap) markup in mind and design them semantically.