I'm using react js 15.4.2. I have html data stored as string like "<p>Hello..</p>". I can not append them to the DOM.

...
ponentDidMount(){
  let obj = dataFromDB.map((data)=>{
               return(
                  <div>
                    {data.strHtml}
                  </div>
               ) 
            }) 
   this.setState({storedObj: obj})
}

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

Do you have any suggestions to append the html objects to the DOM properly ?

I'm using react js 15.4.2. I have html data stored as string like "<p>Hello..</p>". I can not append them to the DOM.

...
ponentDidMount(){
  let obj = dataFromDB.map((data)=>{
               return(
                  <div>
                    {data.strHtml}
                  </div>
               ) 
            }) 
   this.setState({storedObj: obj})
}

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

Do you have any suggestions to append the html objects to the DOM properly ?

• javascript
• reactjs

Share Improve this question Follow asked Mar 2, 2018 at 14:23 kbrkkbrk 66011 gold badge1010 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

you could also look into react-html-parser module for parsing html before rendering to the DOM it's pretty easy to use.

import Parser from 'html-react-parser';    

class Example extends React.Component {

render() {
   return (
     <div>
       {Parser(this.state.dataStored)}
     </div>
   )
}
}

You should use this code -

  return <div dangerouslySetInnerHTML={{__html: data.strHtml}} />;