/blog/mdx-remove-unwanted-paragraph-tags

[giscus[bot]]

/blog/mdx-remove-unwanted-paragraph-tags

Prevent invalid HTML markup by eliminating extra

tags in your multi-line JSX elements. Learn how to fully leveraging the power of MDX and JSX.

http://localhost:3000/blog/mdx-remove-unwanted-paragraph-tags

[jasongerbes]

If you found this post helpful, please consider leaving a reaction ☝️

You're welcome to share any feedback or ask questions. All the best with your MDX journey!

[siefkenj]

I just came across this issue :-(. I took another approach of unwrapping the p manually with React. In my example, I needed to insert the word Example. before the first child, but have it on the same line.

function isP(child: React.ReactNode): child is React.ReactElement {
    try {
        return (
            React.isValidElement(child) &&
            typeof child.type !== "string" &&
            child.type.name === "p"
        );
    } catch (e) {
        return false;
    }
}
export function Description({ children }: React.PropsWithChildren<{}>) {
    // We extract the first child. If it's a <p> tag, we take its content.
    const [firstChild, ...rest] = React.Children.map(children, (child, i) => {
        return i === 0 && isP(child) ? child.props.children : child;
    });
    return (
        <div className="nx-w-full nx-min-w-0 nx-leading-7">
            <p className="nx-mt-6 nx-leading-7 first:nx-mt-0">
                <strong>Example. </strong>
                {firstChild}
            </p>
            {rest}
        </div>
    );
}