Material-ui: [DialogContentText] Wraps in a paragraph element which causes a warning in some cases

[jamigibbs]

Problem description

The DialogContentText component uses a <p> tag which causes validation issues when using structured content within that text block.

The warning message is:

proxyConsole.js:56 Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

This component shouldn't assume that the content within it will only be text. If you want to add a wrapping div to that content, you'll receive the above error.

Steps to reproduce

This is a function that will display a list of text fields within the DialogContentText component:

  siteEditList = (siteInfo) => {
    return siteInfo.map( (key, index) =>
      <div key={index}>
          <TextField
            id={key}
            label={this.titleCleanup(key)}
            name={key}
            defaultValue={siteInfo[key].toString()}
            onChange={ this.handleChange } />
      </div>
    )
  }

And the function being called in the UI component:

<Dialog>
    <DialogContent>
        <DialogContentText>
              {this.siteEditList(siteInfo)}
        </DialogContentText>
    </DialogContent>
</Dialog>

The output is a default <p> element:

I could wrap the .map content in a span but I don't think that I should be changing the layout of my application because the DialogContentText is making assumptions about what type of content it should contain.

Versions

• Material-UI: 1.0.0-beta.5
• React: 15.6.1
• Browser: Chrome

[jamigibbs]

A little more digging and I think the real issue is that you can't use TextField (and likely other components) inside of DialogContentText without that warning message triggering because it would still include a div inside of the p wrap.

So even if I changed the wrapping div to a span, there's still a warning message because of the TextField.

[oliviertassinari]

At first, I was going to suggest to change the DialogContentText root component from a p to a div. But after digging more into the issue, I think that you should be only using the DialogContentText component if you need to display some text.

Otherwise, follow the demos of the documentation and only use a DialogContent. We have split the DialogContentText and DialogContent responsibilities for this reason.