ReactJs: TypeError: Cannot read property ‘length’ of undefined

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:

<h1>Hello this </h1><blockquote>is my five no <strong>of post</strong></blockquote>

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:

TypeError: Cannot read property 'length' of undefined
push../node_modules/parse5/lib/tokenizer/preprocessor.js.module.exports.push../node_modules/parse5/lib/tokenizer/preprocessor.js.Preprocessor.write
C:/Users/alami/OneDrive/Desktop/MERN stack/MERN CRUD/frontend/node_modules/parse5/lib/tokenizer/preprocessor.js:91
  88 |     else
  89 |         this.html = chunk;
  90 | 
> 91 |     this.lastCharPos = this.html.length - 1;
  92 |     this.endOfChunkHit = false;
  93 |     this.lastChunkWritten = isLastChunk;
  94 | };

I have tried code like this:

import renderHtml from "react-render-html";

  const showSinglePost = () => (
    <div className="row">
      <div className="col-md-8 offset-md-2 pt-3 pb-2">
        <h1>{post.title}</h1>
        <div className="lead pt-3">{renderHtml(post.content)}</div>
        <p>
          Author: <strong>{post.user}</strong> Published on{" "}
          <strong>{new Date(post.createdAt).toLocaleString()}</strong>
        </p>
      </div>
    </div>
  );
  return <div className="container">{post && showSinglePost()}</div>;
};

Answer

I got the solution by this way:

import renderHtml from "react-render-html";

  const showSinglePost = () => (
    <div className="row">
      <div className="col-md-8 offset-md-2 pt-3 pb-2">
        <h1>{post.title}</h1>
        <div className="lead pt-3">{renderHtml(post && post.content)}</div>
        <p>
          Author: <strong>{post.user}</strong> Published on{" "}
          <strong>{new Date(post.createdAt).toLocaleString()}</strong>
        </p>
      </div>
    </div>
  );
  return <div className="container">{post && showSinglePost()}</div>;
};

Just I have to add this line: {renderHtml(post && post.content)}

Advertisement

Answer