ReactJS/JavaScript RegExr Converting data of object html into text [duplicate]

Question

How can I convert in JavaScript/ReactJS into string.
For example I have an object:

{
  article: '<p class="md-block-unstyled">First text...</p><p>Second text></p>'
}

I want to convert it and render a paragraph:

First Text... Second text

I don't want the <p> tag or any others tag to be printed on the screen but I want them to behave as actual paragraphs.

Please phrase your question correctly. What is the structure of your object ? — Dhananjai Pai
– Dhananjai Pai, Commented Jul 27, 2018 at 12:28

Tholle · Accepted Answer · 2018-07-27 12:31:17Z

3

You can use dangerouslySetInnerHTML to render HTML from a string.

Example

function App() {
  const obj = {
    article: '<p class="md-block-unstyled">First text...</p><p>Second text</p>'
  };
  return <div dangerouslySetInnerHTML={{ __html: obj.article }} />;
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

answered Jul 27, 2018 at 12:31

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

2 Comments

Dgen Vnk Over a year ago

Thanks you! But I would like to do it without using dangerouslySetInnerHTML. There is no other option to do it ?

Tholle Over a year ago

@DgenVnk dangerouslySetInnerHTML is the React way of doing it, but you should only do it if you trust the HTML in the string and you absolutely have to.

Amir · Accepted Answer · 2018-07-27 12:34:04Z

1

Here is your solution.

const obj = {
  article: '<p class="md-block-unstyled">First text...</p><p>Second text></p>'
} 


<div dangerouslySetInnerHTML={{__html: obj.article}} />

answered Jul 27, 2018 at 12:34

Amir

115 bronze badges

Collectives™ on Stack Overflow

ReactJS/JavaScript RegExr Converting data of object html into text [duplicate]

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related