How to fetch Html text or element in reactjs

Question

I'm new at Reactjs and I try to fetch some HTML data but my problem is when I check browser the HTML tag show as a text, not as an element

My component source:

import React from 'react';

export class About extends React.Component{
    constructor(props){
        super(props);

        this.state = {
            data: '<p>Hello world</p>',
        }
    }

    render(){
        return(
            <div className="container">
                {this.state.data}
            </div>
        )
    }
}

the result it shows:

<p>Hello world</p>

what I want to see:

Hello world

Maniraj Murugan · Accepted Answer · 2020-02-25 10:48:13Z

1

You can use dangerouslySetInnerHTML, if you receive the html as string..

Change

<div className="container">
   {this.state.data}
</div>

to

<div className="container" dangerouslySetInnerHTML={{ __html: this.state.data }} />

Component would be like,

class About extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      data: "<p>Hello world</p>"
    };
  }

  render() {
    return (
      <div
        className="container"
        dangerouslySetInnerHTML={{ __html: this.state.data }}
      />
    );
  }
}

Working Example here...

edited Feb 25, 2020 at 10:48

answered Feb 25, 2020 at 10:42

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

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

Comments

Alexandre Senges · Accepted Answer · 2020-02-25 10:43:10Z

0

You can use dangerouslySetInnerHTML at your own risk (you should use a sanitizer to protect yourself from XSS.)

edited Feb 25, 2020 at 10:43

answered Feb 25, 2020 at 10:42

Alexandre Senges

1,6091 gold badge15 silver badges23 bronze badges

1 Comment

Jai Over a year ago

should be a comment.

Collectives™ on Stack Overflow

How to fetch Html text or element in reactjs

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related