Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. Error Component Stack

[eriknyk]

trafficstars

Describe the bug I got the following Warn:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. Error Component Stack

Exactly when <Lottie component is rendered.

To Reproduce Steps to reproduce the behavior:

1. Render any lottie json
2. See warning: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. Error Component Stack

Expected behavior No warning should be in console.

Screenshots

Additional context Using version: "lottie-react": "^2.4.0",

[Sheraff]

AlertDialogDescription is likely a <p> element, and in your screenshot we see a <div> added as a child of it. This is what the error reports, it's not about the Lottie component inside of it.

If this is a radix component, just add the asChild prop to it, or move the div and Lottie outside of the description. If this is something else, sorry your code sample isn't enough for me to help you.