Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. about react-portabletext

[swalker326]

What does your rendered html structure look like?

[kesteinbakk]

What does your rendered html structure look like?

Sorry, should have thought about including the output html to get a view on the nested <p>'s:

When exanimating this I see that it is MUI's Typography component that's making the trouble. I thought this was just a div, but it too renders a p, so combined with Portable text there will be a nested paragraph element.

So this:

                    <Typography variant="body1">
                      {content ? (
                        <PortableText
                          // Pass in block content straight from Sanity.io
                          value={content}
                          components={{
                            types: { image: ImageComponent },
                          }}
                        />
                      ) : `[${getLang('noContent')}]`}
                    </Typography>

Leads to this:

<p class="MuiTypography-root MuiTypography-body1 css-ahj2mt-MuiTypography-root"><p>Test text</p></p>

My bad. Sorry. I'll close the issue. :-)