How to render HTML Comment in React(Next.js) Without Wrapper Element

Question

There is React code as below:

export default function App() { return ( <div> <span dangerouslySetInnerHTML={{ __html: `<!-- comment -->` }}></span> <h2>i want comment rendering!!!</h2> </div> ); }

The above code is rendered as follows:

But I'd like it to render like this:

So, I would like to ask if there is a way to render HTML Comments in React without a Wrapper Element.

https://www.reddit.com/r/reactjs/comments/11kiy7k/alternatives_to_dangerouslysetinnerhtml/?rdt=36706

https://www.npmjs.com/package/isomorphic-dompurify

How to render a HTML comment in React?

I searched hard, including the links above, but couldn't find a solution.

No. You created a <span> tag that contains a comment. Why would you expect the span to be suppressed? — Tim Roberts
– Tim Roberts, Commented Sep 23, 2023 at 1:55
@TimRoberts Yes, it is. In reality, the HTML Comment is rendered inside the span tag. My question here was that I wanted to render Comment without span tag. — dom wis
– dom wis, Commented Sep 23, 2023 at 2:00

ewhalenkamp · Accepted Answer · 2023-09-23 05:02:10Z

Per Dermot Doherty and their comment on this question you linked, we can use outerHTML magic on a <script> tag to achieve this result.

The following version definitions of a HTMLComment component come from here.

HTMLComment.jsx

Using client hooks

import React, { useRef, useEffect } from 'react'; export default function HTMLComment({ comment }) { const ref = useRef(); useEffect(() => { ref.current.outerHTML = `<!--${comment}-->`; }, [comment]); return ( <script ref={ref} type="text/placeholder" /> ); }

SSR safe

export default function HTMLComment({ comment }) { const html = `<!-- ${comment} -->`; const callback = (instance) => { if (instance) { instance.outerHTML = html; } }; return (<script ref={callback} type="text/comment" dangerouslySetInnerHTML={{__html: html}} />); }

You can use the above component as follows (both versions output the same result):

App.jsx

export function App(props) { return ( <div className='App'> <HTMLComment comment="hello world"/> <h1>Sample element</h1> </div> ); }

Output:

<div class="App"> <!--hello world--> <h1>Sample element</h1> </div>

Thanks for your reply. However, what I want is to include html comments in the html document rendered on the server without using useEffect .
Found a great resource here that actually walks through different versions of this component and their upsides/downsides. I've edited my answer to include a second version that should hopefully satisfy your use case.
Thank you so much for your continued concern. I accessed the link you provided and applied the solutions, but the wrapper element (<script>) still exists above the html comment on the server side (or index.html after building). Still, thank you for finding and sharing related information. :)
No, What you are trying to do is not possible. You could render an element without a tag by using React.Fragment but this can not be done on the server side and it also can not be stiled from my knowledge. What is it that you are trying to do? Maybe there is another solution. Do you simply want to render code? Isn't a library like react-code-blocks helpful?
@Oliver Rather than wanting to render code, I want to purely insert an html comment without a Wrapper Element where I want it. And this is what I want to include in the output that occurs when I run "npm run build".

Collectives™ on Stack Overflow

How to render HTML Comment in React(Next.js) Without Wrapper Element

1 Answer 1

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Linked

Related