CODEWITHSUNDEEP
javascripthtmlreactjs
breadstickguy
breadstickguy

Reputation: 69

ReactJS creating extra spans in HTML

I have started working on a project and inherited a large amount of ReactJS that I am trying to sort through and better understand. Currently there is a small issue I'm trying to fix in the app I'm working on.

Here is the code for the render:

render: function() {
return (
  <div className="finish-content-container">
    <div className='finish-instructions'>
      <span>
        {this.props.finishInfo.startpage.instructions || ""}
      </span>
    </div>
    {
    this.props.userData.score && !this.props.finishInfo.finishpage.hideScore ?
    <div className="finish-results">
      <span>{"Your Score: " + (this.props.userData.score || "")}</span>
    </div> : ""
    }
    {
    this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.graph ?
      <div className="finish-graph">
        <div dangerouslySetInnerHTML={{__html: processStoredGraph(this.props.finishInfo.finishpage.graph, 250, 450)}}></div>
      </div> : ""
    }
    {
    this.props.userData.score && this.props.finishInfo.finishpage && this.props.finishInfo.finishpage.feedback ?
    <div className='finish-results-feedback'>
      {this._getConditionalText(this.props.finishInfo.finishpage.feedback, this.props.userData.score)}
    </div> : ""
    }
    <div className="finish-content" dangerouslySetInnerHTML={{__html: this.props.finishInfo.startpage.content}}></div>
    <div className="finish-button">
      <span onClick={this.props.onClick} className="btn finish">REPLAY</span>
    </div>
  </div>
);
},

Here's what is happening: all the logic seems to work fine, but it's creating addition spans in the HTML and those spans are taking up real estate on the page, even when they have no data.

Any thoughts? I can include the HTML output from the page if that's helpful at all.

Upvotes: 2

Views: 1053

Answers (1)

nrabinowitz
nrabinowitz

Reputation: 55678

To answer your question: React inserts spans in the DOM for various reasons, including to wrap floating text nodes (see this answer), white space (see this answer), and (I think) to set placeholders for components that return null from the render method, among other things. If this is causing issues for you, it's probably because you're using CSS that operates on all span elements, or all span elements within the scope of your component. Ditch the CSS, or make it specific to the elements it needs to style, and you should be fine.

In my opinion, React's approach here is in keeping with the intent of the span element, which ought to be a layout no-op if not associated with a specific class.

Upvotes: 1

Related Questions