0

Here is my code.

    export default class Notes extends Component {
        constructor() {
            this.state = {
                note: null
            }
        }

        componentDidMount() {
            this.getNote();
        }

        getNote() {
            axios.get("/api/get-note")
                .then(response => {
                    this.setState({note: response.data.note});
                })
                .catch(err => { 
                    console.log(err); 
                });
        }

        render() {
            return (
                <div>
                    <pre>{this.state.note}</pre>
                </div>
            )
        }
    }

Let's say the returned value is "<h1>Heading Text</h1>". I want it to show H1 heading text. But it doesn't show formatted text. it shows plain text <h1>Heading Text</h1>. How can I display formatted text instead of plain text?

Ma Long
  • 135
  • 2
  • 11
  • Check this answer - https://stackoverflow.com/questions/19266197/reactjs-convert-html-string-to-jsx/27938353#27938353 – codemax Aug 12 '20 at 01:57

1 Answers1

1

Plain JavaScript will save the day.

document.querySelector('#elementToBeReplace').innerHTML = this.state.note;

Another Option with react.js is use of dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={{ __html: this.state.note}} />

Or You can use html-react-parser.

import Parser from 'html-react-parser';

<div>{Parser(this.state.note)}</div>
Aravinda Meewalaarachchi
  • 2,551
  • 1
  • 27
  • 24