CODEWITHSUNDEEP
reactjs
mikaint
mikaint

Reputation: 353

HTML code not dispalyed correctly with render()

I'm retrieving data from an external source and description field contains some HTML code e.g.

<p>some text with <a hre="#">link</a></p>

When i render the value i'm getting it on screen exactly as posted above. How can i display plain text?

  return (
    <div className="col-md-8">
      <div className="details">
        <div>{title}</div>
        <div>{description}</div>
      </div>
    </div>
  );

Upvotes: 0

Views: 27

Answers (2)

Chase DeAnda
Chase DeAnda

Reputation: 16441

You should use dangerouslySetInnerHTML. It allows you to render raw html stored as a string:

function createMarkup() {
  const description = "<p>some text with <a hre="#">link</a></p>";
  return {__html: description};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Upvotes: 1

Bama
Bama

Reputation: 577

If you go ahead and start using only Paragraph tags you will get plan text

Upvotes: 1

Related Questions