How to render HTML string to component in React JS

Question

I have a HTML content as string for eg <div>Hello</div> and I just want to render it as HTML in react component without using innerHTML method and default react like dangerouslySetInnerHTML. Let me know if there is any perfect alternative which will work effectively. I just do not want to use any package like html-to-react. Is it possible to achieve it with any other default method in React Render?

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState :`<div>Hello</div>` }); 
    }
    render() {
        return (
            <div id="container">{this.state.currentState}</div>
        )
    };
};

Sample Link

I need to render tags not as string

Possible duplicate of Rendering raw html with reactjs

Hyyan Abo Fakher
– Hyyan Abo Fakher

2019-05-21 10:31:11 +00:00
Commented May 21, 2019 at 10:31 — Hyyan Abo Fakher
– Hyyan Abo Fakher, Commented May 21, 2019 at 10:31

Mangesh · Accepted Answer · 2019-05-21 11:13:21Z

1

You can use dangerouslySetInnerHTML in react. For more details you can use below link: https://reactjs.org/docs/dom-elements.html

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState: <div>Hello</div> }); 
    }

    this.createMarkup() {
      return {__html: this.state.currentState};
    }

    render() {
        return (
            <div id="container" dangerouslySetInnerHTML={createMarkup()}></div>
        )
    };
};

answered May 21, 2019 at 11:13

Mangesh

3652 silver badges8 bronze badges

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

Comments

Jose A. Ayllón · Accepted Answer · 2019-05-21 10:39:02Z

-2

Just save it as an element instead of string:

export default class sampleHTML extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentState: "",

        };
    }
    componentDidMount() {
        this.setState({currentState: <div>Hello</div> }); 
    }
    render() {
        return (
            <div id="container">{this.state.currentState}</div>
        )
    };
};

answered May 21, 2019 at 10:39

Jose A. Ayllón

8766 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to render HTML string to component in React JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related