How to parse string in react to render html

Question

I am building a very basic blog type app with a MERN stack and have it to the point where I can have a very simple post of just text. Can anyone suggest how I could parse that string to also render HTML in my content?

So a post would look like

Bold Text with a link

instead of

<b> Bold Text with <a href="#"> a link</a></b>

One idea I had was to try and use DOMParser in the component, something like

  const parser = new DOMParser();
  const parsedContent = parser.parseFromString(post.description, 'text/html');

// and then in the render just print it out
<div className='content'>
{parsedContent} 
</div>

That of course did not work because that is returning an entire html object and React errors with Objects are not valid as a React child.. if you meant to render a collection of children, use an array instead.

What would be the proper way to parse that string and render the HTML in my content?

DCodeMania · Accepted Answer · 2022-12-01 08:37:27Z

1

You can just try this way:

const Test = () => {
    const text = '<b> Bold  Text with <a href="#"> a link</a></b>';

    return <div dangerouslySetInnerHTML={{ __html: text }} />;
};

export default Test;

answered Dec 1, 2022 at 8:37

DCodeMania

1,1572 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zac Over a year ago

Thank you, that works! I am not too worried about security for this one so willing to live dangerously ;)

Collectives™ on Stack Overflow

How to parse string in react to render html

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related