0

I am in the middle of creating my first real react app... On my home page I have a section that display random recommendations.
The recommendations are loaded into an array from a JSON doc, and I use setInterval to change the contents of the div container.
The problem I'm having is that some of the data from the json has HTML characters (mostly spans with a className enabling special styling) and react is seemingly escaping these HTML chars because they are being inserted as standard text.
How can I insert this content as HTML?

EDIT: As Andy pointed out, I found other related questions, but they don't seem to help in my scenario because they use it in the render method, I'm not.

EDIT 2: To clarify a little more why this question is different than the one it qas claimed to be duplicate of: When I use the method dangerouslySetInnerHTML I get the following error in the console:
Error: Objects are not valid as a React child (found: object with keys {__html}).
I later found someone on SO that mentioned explicitly that that method does not work for children.

So now, what is the solution for my scenario?
Any help will be appreciated.

Here is the relevant code:

var React = require('react');

var Home = React.createClass({

  getInitialState: function() {
    return {
      recCtr: 0,
      allRecs: this.prepareRecs(/*This function gets and prepares the array of recommendations*/),
      currentRec: {}
    }
  },

  componentDidMount: function() {
    this.setState({currentRec: this.state.allRecs[0]});
    this.startRecsInterval().bind(this);
  },

  startRecsInterval() {
    setInterval(function(){
    let ctr = this.state.recCtr + 1;
    if (ctr >= this.state.allRecs.length) ctr = 0;
    this.setState({recCtr: ctr, currentRec: this.state.allRecs[ctr]})
    }.bind(this), 5000)
  },

  render() {
    return (
    <div id="mainDiv">
      <div id="recommendations">
        <div id="comment">{ this.state.currentRec.comment }
          <span className="author">{ this.state.currentRec.author }</span>
        </div>
      </div>
    </div>
    )
  }
})

module.exports = Home;
DaveyD
  • 337
  • 1
  • 5
  • 15
  • 1
    Use https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml. Please search before asking on SO. – Andy Ray Dec 29 '16 at 06:05
  • @AndyRay, sorry for not writing this, but I wrote this post after searching for an hour and a half! The link that you posted above I already saw but it doesnt help me (or at least I dont know how it does) because it uses the render method. How am I supposed to use it in my example - That would be a bit more helpful than what you wrote so far... Maybe it's simple for you but it's not for me – DaveyD Dec 29 '16 at 06:29
  • After trying for a couple more hours and failing, I realized that the problem is with the dangerouslyInsertHTML method. I get an error in the console saying that you can't use it on child elements. I didnt realize this until I found a different post on SO where someone mentioned this explicitly. Now, How to get around this??? – DaveyD Dec 29 '16 at 15:15
  • @AlexanderT. - Do you think we can get this reopened? – DaveyD Dec 29 '16 at 23:56
  • It seems that there is no solution for this. The only way around is to remove the child elements from the div. – DaveyD Dec 30 '16 at 01:11

0 Answers0