<FormattedMessage> unexpectedly preserves whitespace for its props

[lencioni]

Normally, if I have this code:

<span>
  Hi
</span>

React will render something like this in the DOM:

<span data-reactid=".5.3.0.0.0.0.1.0.0.2:$11.1.2.0.1.0">Hi</span>

Now, if I pass that same JSX to <FormattedMessage> like this:

<FormattedMessage
  message={this.getIntlMessage('myMessage')}
  thing={
    <span>
      Hi
    </span>
  }
/>

then something like the following is rendered for the thing prop:

<span data-reactid=".5.3.0.0.0.0.1.0.0.2:$11.1.2.0.1.1.1">
              Hi
            </span>

In many scenarios this might only introduce a single space of unexpected whitespace which usually won't be a deal-breaker. However, if you are using this in conjunction with a style like white-space: pre-line; it can really break the UI.

It would be better if the props that are passed in to <FormattedMessage> were rendered with the same rules that React uses.

[ericf]

It would be better if the props that are passed in to were rendered with the same rules that React uses.

Nothing special is happening here, elements passed as props simply become children. Are you sure this isn't a JSX thing preserving the source's whitespace when passing an element as props to another component?

[lencioni]

Are you sure this isn't a JSX thing preserving the source's whitespace when passing an element as props to another component?

Good call, I just tried this out with a different component and it seems to have the same behavior.

[lencioni]

I think the problem might be in Babel. babel/babel#1276