Adding a React Component within dangerouslySetInnerHtml or similar

Question

I'm making a Gatsby site, and after running some GraphQL queries, I pass some HTML strings into React components. I've been able to render these with dangerouslySetInnerHtml, html-react-parser, etc. However, I'd like to also just write component tags within the original Markdown and render those as components.

A simple example of this would be

import React from "react";

export default function App() {
  const RedDiv = () => {
    return <div style={{ color: "red" }}>This is a red div</div>;
  };

  const StringRedDiv = "<div style={{color: 'red'}}>This is a red div</div>";

  return (
    <div className="App">
      <RedDiv />
      <div dangerouslySetInnerHTML={{ __html: StringRedDiv }} />
    </div>
  );
}

CodeSandbox

Obviously, we don't need to use dangerouslySetInnerHtml here, but I'd like to achieve the desired effect (in this case having both divs have red text) using a method which takes an HTML string and transforms it into React.

Bassem · Accepted Answer · 2020-05-31 01:40:13Z

1

For that, you can use the react-html-parser like this:

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

class HtmlComponent extends React.Component {
  render() {
    const html = "<div style={{color: 'red'}}>This is a red div</div>";
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

On a side note, in order for the dangerouslySetInnerHTML or alternatively the ReactHtmlParser to work, you must use valid HTML attributes.

For instance, the style attribute in your example:

<div style={{color: 'red'}}>This is a red div</div>

should be changed to:

<div style="color: red;">This is a red div</div>

edited May 31, 2020 at 1:40

answered May 31, 2020 at 1:29

Bassem

4,1804 gold badges26 silver badges56 bronze badges

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

2 Comments

Antoine Ego Over a year ago

Thanks, that works! Out of curiosity, I also tried it when passing the string "<RedDiv/>" and that doesn't seem to work. Any idea how to make that work as well?

Bassem Over a year ago

I don't think that's possible though, as you need to pass valid HTML (not JSX) strings

Collectives™ on Stack Overflow

Adding a React Component within dangerouslySetInnerHtml or similar

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related