I need to setup rich text box in my content body section, so I like to use npm react-quill
It’s install succesfully then I have used a bubble them form react-quill
It’s also warking succesfully. But when I try to show my post then display like this:
JavaScript
x
2
1
<h1>Hello this </h1><blockquote>is my five no <strong>of post</strong></blockquote>
2
But I need to plain text with rich text editor. Then I have used npm install react-render-html
.
After that when I try to see my post then show me error like this:
JavaScript
1
11
11
1
TypeError: Cannot read property 'length' of undefined
2
push../node_modules/parse5/lib/tokenizer/preprocessor.js.module.exports.push../node_modules/parse5/lib/tokenizer/preprocessor.js.Preprocessor.write
3
C:/Users/alami/OneDrive/Desktop/MERN stack/MERN CRUD/frontend/node_modules/parse5/lib/tokenizer/preprocessor.js:91
4
88 | else
5
89 | this.html = chunk;
6
90 |
7
> 91 | this.lastCharPos = this.html.length - 1;
8
92 | this.endOfChunkHit = false;
9
93 | this.lastChunkWritten = isLastChunk;
10
94 | };
11
I have tried code like this:
JavaScript
1
17
17
1
import renderHtml from "react-render-html";
2
3
const showSinglePost = () => (
4
<div className="row">
5
<div className="col-md-8 offset-md-2 pt-3 pb-2">
6
<h1>{post.title}</h1>
7
<div className="lead pt-3">{renderHtml(post.content)}</div>
8
<p>
9
Author: <strong>{post.user}</strong> Published on{" "}
10
<strong>{new Date(post.createdAt).toLocaleString()}</strong>
11
</p>
12
</div>
13
</div>
14
);
15
return <div className="container">{post && showSinglePost()}</div>;
16
};
17
Advertisement
Answer
I got the solution by this way:
JavaScript
1
17
17
1
import renderHtml from "react-render-html";
2
3
const showSinglePost = () => (
4
<div className="row">
5
<div className="col-md-8 offset-md-2 pt-3 pb-2">
6
<h1>{post.title}</h1>
7
<div className="lead pt-3">{renderHtml(post && post.content)}</div>
8
<p>
9
Author: <strong>{post.user}</strong> Published on{" "}
10
<strong>{new Date(post.createdAt).toLocaleString()}</strong>
11
</p>
12
</div>
13
</div>
14
);
15
return <div className="container">{post && showSinglePost()}</div>;
16
};
17
Just I have to add this line: {renderHtml(post && post.content)}