Pre-formatted text loses line breaks

Bug Report

• I would like to work on a fix!

Current behavior

Text inside a <pre> block is loosing formatting when the block is converted to React.createElement function call.

• REPL

Input Code

<pre>
line 1
line 2
</pre>

Expected behavior

The line breaks (and any spacing!) inside a <pre> block should be maintained.

I would expect this:

React.createElement("pre", null, "line 1\nline 2");

Instead I get this:

React.createElement("pre", null, "line 1 line 2");

[viktor-yakubiv]

JSX supposed to work so. For any element, all spaces including newlines are replaced by a single line. I think is was desired behaviour by design.

If you pass <pre>{'line1\nline2'}</pre> to Babel, it will apprear as expected.

The problem here is that markdown including MDX should be treated as HTML at first and as JSX at second. Saying that I mean everything inside lowercased tags (which supposed to be HTML elements) should be parsed in HTML way preserving all the spaces.

Although, we may say that the whitespace should be preserved not for special tags but for the whole MDX since it’s an HTML syntax.

I support the idea but it brings incompatibility with common JSX behaviour when the following example will behave as HTML but would be weird according to the common JSX practices.

import Button from './button'

<Button>Action 1</Button>
<Button>Action 2</Button>

Treating this as HTML would render 2 buttons with a space character in between when JSX strips any spacing between the tags.

[pedrolamas]

Closing this issue as it does make sense from a JSX perspective to have the current behavior.