Growl detail should be placed in <div> not <p>

[efc]

I'm submitting a ...

[X] bug report

Codesandbox Case (Bug Reports)

https://codesandbox.io/s/primereact-growltest-7zkdf

Just click on the blue button, notice the growl message and the console log error.

Current behavior

Even though the detail property of Growl is defined as type element, it is not possible to include <p> tags in the element without generating console errors. This appears to be because the Growl component wraps the supplied detail in a <p> itself. Growl should not assume detail can be wrapped in anything but a <div> safely.

Expected behavior

The growl message should render without generating a console log error.

Minimal reproduction of the problem with instructions

Ask a Growl component to show {severity: 'info', detail: <p>Oops</p>}. Note the error that appears in the DOM: Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>..

If you inspect the DOM at this point you will see that the growl has wrapped the detail element in a <p>.

Please tell us about your environment:

macOS 10.14.5

• React version:

16.8.6

• PrimeReact version:

3.1.7

• Browser:

all

• Language:

Typescript

[efc]

Right now line 97 of GrowlMessage.js reads:

                        <p>{this.props.message.detail}</p>

It should become:

                        <div>{this.props.message.detail}</div>

If you wish to wrap plain text in a <p>, then you should probably first test this.props.message.detail to see if it is not a JSX element, and only if it is not go ahead and wrap in <p>, otherwise wrap in <div>.

[mertsincan]

Thanks a lot ;)