template literals is not working in react

Question

I have my code as below. template literals not creating multiline string in span tag, where as it is creating multiline in console.

import React, {Component} from 'react';

import ReactDOM from 'react-dom';


class MyApp extends Component {

    render() {

        console.log(`string text line 1
        string text line 2`);

        let test = `dfas dss
        sdassas`;

        return (
            <span>{test}</span>
        )
    }
}

ReactDOM.render(
    <MyApp />,
    document.getElementById('app')
  );

Answer 1

HTML collapses whitespace into a single space. See Why does HTML require that multiple spaces show up as a single space in the browser?

The easiest solution would be to tell that span that it should not collapse whitespace.

The following snippet shows you that this is not related to React, and how to display newlines in HTML

<h2>Using white-space: pre</h2>
<span style="white-space: pre">       
    
    Hello this
    
    has new lines
</span>
    
<h2>Collapsing white space</h2>
<span>
    
    Hello this
    
    has new lines
    
</span>

Answer 2

When using JSX this is what solved it for me:

  <span style={{ whiteSpace: 'pre' }}>
      {`
          Some
          multiline
          text
      `}
  </span>