Decode HTML in React

Su un db ho un campo dove salvo tutto il testo in HTML.

Questo testo, poi, lo prendo in una applicazione React per visualizzarlo sulla pagina.

Di default React non fa il decode dell'HTML "esterno", e quindi visualizza anche tutti i vari tag.

La necessità è quella di fare il decode del testo in HTML.

Ecco la soluzione che ho usato io:

import React, {Component} from 'react';

const renderHTML = (rawHTML: string) => React.createElement("div", {dangerouslySetInnerHTML: {__html: rawHTML}});

export class MyComp extends Component {

    constructor(props) {
        super(props);

        this.noteTpl = this.noteTpl.bind(this);
    }
	
	noteTpl(rowData) {
        return renderHTML('<p>TESTO IN FORMATO HTML</p>');
    }


    render() {
        return (
            <div className="p-grid">
				<p>{this.noteTpl}</p>
            </div>
        );
    }
}

In pratica abbiamo usato dangerouslySetInnerHTML.

Nella documentazione si viede che è l'alterego di innerHTML, che dovreste conoscere visto che si usa molto in Javascript.

Poi abbiamo una funzione che il rendere solo di quel testo; in questo caso la stringa l'ho messa cablata nel codice, me nella realtà mi arriva da db attraverso una web API.

Enjoy!