Draft.js and stateToHTML, how to render output html in react component?

Question

I've got my Draft js editor working fine, it saves to my database, using convertToRaw(editorState1.getCurrentContent()), and I am getting it back and converting it to HTML using draft-js-export-html and stateToHTML(convertFromRaw(dbContent.content.text01)).

So far so good... but now I have raw HTML that I want to display in my react component, and here comes the trouble.

Just rendering it with {props.text01} outputs it as a string and turns into <p>adfasfadfs</p> as text.

Obviously I want it to render as HTML. How do I do that?

I have looked at dangerouslySetInnerHTML but I would prefer not having ANOTHER plugin just to get my Draft js working the way I want it to.

Am I going at it the wrong way, or is dangerouslySetInnerHTML the only way to do it?

Not really, draft.js and draft-js-export-html would make that pretty complicated. — Winter
– Winter, Commented May 11, 2017 at 11:46
dangerouslySetInnerHTML should work just fine (it's not a plugin, it's provided by React). But why don't you render it using Draft with readOnly set to true? I guess my question is what reasons you have for using stateToHTML. — tobiasandersen
– tobiasandersen, Commented May 11, 2017 at 12:04
@tobiasandersen the thing is that I will sometimes have to do some manipulation on the content, which is kind of complicated. I have not implemented it yet, but right now it seems easier to me to modify the html instead of the json object. — Winter
– Winter, Commented May 11, 2017 at 12:07

Community · Accepted Answer · 2017-05-23 11:54:44Z

3

As described in this answer, React will escape HTML by default (that's why it's just rendered as a string). But you can force the rendering by using the dangerouslySetInnerHTML property. You'd just have to take potential XSS attacks into consideration.

If Draft is already installed, another way to just simply render the content is to use the readOnly prop on the DraftEditor.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 11, 2017 at 12:22

tobiasandersen

8,6783 gold badges32 silver badges40 bronze badges

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

1 Comment

LearnIT Over a year ago

FYI, the readOnly prop fails to render images.

MehulJoshi · Accepted Answer · 2017-05-11 11:46:50Z

2

you can use this npm module. link is link npm install --save html-to-react

Examples

Simple The following example parses each node and its attributes and returns a tree of React elements.

var ReactDOMServer = require('react-dom/server');
var HtmlToReactParser = require('html-to-react').Parser;

var htmlInput = '<div><h1>Title</h1><p>A paragraph</p></div>';
var htmlToReactParser = new HtmlToReactParser();
var reactElement = htmlToReactParser.parse(htmlInput);
var reactHtml = ReactDOMServer.renderToStaticMarkup(reactElement);

assert.equal(reactHtml, htmlInput); // true

answered May 11, 2017 at 11:46

MehulJoshi

8898 silver badges19 bronze badges

3 Comments

Winter Over a year ago

looks interesting. I am not rendering on a server though, will it still work?

MehulJoshi Over a year ago

here reactElement is a pure react element, you can insert it in react directly, so you can skip ReactDOMServer if you want.

Winter Over a year ago

Thanks @MehulJoshi for your answer, it seems very interesting, but is probably a bit overkill for what I need at the moment.

Collectives™ on Stack Overflow

Draft.js and stateToHTML, how to render output html in react component?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related