Unexpected JSX Whitespace Handling with Leading and Trailing Tags

[jmar777]

Related (closed) issue: #65

I'm not sure whether this is considered a bug or if it's working as intended, but I'll at least throw in a vote that the behavior is unexpected. Given the following example:

var Test = React.createClass({
  render: function() {
    return (
      <p>
        Demonstration of <span>unexpected</span>
        whitespace handling in
        <span>ReactJS</span>.
      </p>
    );
  }
});

React.render(<Test />, document.body)

[Demonstration on jsbin].

I would suggest that the expected rendered output of the above component would be:

Demonstration of unexpected whitespace handling in ReactJS.

Whereas the actual output is:

Demonstration of unexpectedwhitespace handling inReactJS.

(No whitespace between "unexpected" and "whitespace" or between "in" and "ReactJS").

I would consider this unexpected for two primary reasons:

• It's inconsistent with HTML's handling of whitespace.
• Removing the <span> tags (but leaving newlines and indentations unchanged) causes whitespace to be preserved.

If this is simply a bug, then I suppose there's no need to belabor the point. If not, is there some rationale for leading/trailing tags behaving different than leading/trailing plain text?

Thanks!

[zpao]

It is intentional and we know it's inconsistent with HTML (which is honestly pretty odd). The reason removing the spans works is because then the whole child is read as a single string (with spaces).

There is some more detail in the blog post when we made this change (>1 year ago): http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html#jsx-whitespace

The short version is that it's what we believe to be the lesser of 2 (whitespace handling) evils.

[jmar777]

@zpao Given a tossup between protecting developers from whitespace that they unintentionally added (but added nonetheless) vs. departing from the obvious HTML analog and actively trimming whitespace that was intentionally added...

I'll just stop, since I guess this ship has sailed? Either way, thanks for the prompt reply. Mad <3's for the team.

[icirellik]

I do have a question regarding this, mostly because I'm starting to see pull requests come through containing   to correct this "feature", is there a preferred way to ensure correct spacing on the client?

Of the following choices, its tough to choose a winner:

• The React way generates far too much boiler plate.
•   is rather difficult to read
• [:space:] seems ripe for a developer to remove during a refactor.

React

Demonstration of <span>unexpected</span>
{' '}whitespace handling in{' '}
<span>ReactJS</span>.

nbsp

Demonstration of <span>unexpected</span>
&nbsp;whitespace handling in&nbsp;
<span>ReactJS</span>.

<span>

Demonstration of <span>unexpected</span>
<span> whitespace handling in </span>
<span>ReactJS</span>.

[syranide]

Related: facebook/jsx#28, facebook/jsx#35, facebook/jsx#8

I think it's important to note that JSX is not HTML. JSX compiles to JS which can then target any frontend. While you may expect implicit whitespace to appear in certain places it currently doesn't due to familiarity with HTML, if you check the resulting code without whitespace trimming then you'll see that you definitely do not want that.

<span>
  <span>
    X
  </span>
</span>

With our current white-space rules it generates:

React.createElement('span', {}, React.createElement('span', {}, 'X'));

But without it would generate:

React.createElement('span', {}, '\n  ', React.createElement('span', {}, '\n    X\n  '), '\n  ');

Is that what you intended? I'm pretty sure it's not, especially if you consider that most frontends would be expected to take whitespace literally and not trim it like HTML does (can be disabled with white-space: pre-wrap which is really nice).

Personally I can count the number of times I've had to use {' '} in our codebase on one hand, and I even prefer it that way because it also shows that I explicitly wanted those to be there.