从 HackerNewsApi 后端接收的 HTML 标签和特殊字符，未在视图中解码

Question

I am retrieving JSON data from the hackerNews Api. I received the comments stored in the back-end as below:

by: "metakermit"
id: 19665566
kids: [19665689]
parent: 19664663
text: "A 15% cost reduction – not bad.<p>Possibly interesting – I&#x27;m working on developing a similar battery - solar panel off-the-shelf system that would be suited for people who live in cities (e.g. if you want to put a solar panel on your balcony):<p><a href="https:&#x2F;&#x2F;www.craftstrom.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.craftstrom.com&#x2F;</a>"
time: 1555338679
type: "comment" . 

When I rendered the above data in the browser view, the special characters and html tags were shown as it is in the JSON.

Can somebody help please?

Answer 1

you can use the dangerouslySetInnerHTML attribute/directive to tell react to interpret the html as it is.

Example

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  createMarkup() {
    return {__html: '<h3> this is a header </h3> normal text'};
  }

  render() {
    return (
      <div>
        <div dangerouslySetInnerHTML={this.createMarkup()}></div>
      </div>
    );
  }
}

Working stackblitz

Reference:

React documentation

Answer 2

I used html-react-parser library and it worked for me. https://github.com/remarkablemark/html-react-parser#usage

Big Thanks @Abdelkarim EL AMEL. I appreciate your reply.