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 (
            {test}
        )
    }
}

ReactDOM.render(
    ,
    document.getElementById('app')
  );

user_227299 · Answer

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

Using white-space: pre
       
    
    Hello this
    
    has new lines

    
Collapsing white space

    
    Hello this
    
    has new lines

user_12019249 · Answer

When using JSX this is what solved it for me:

  
      {`
          Some
          multiline
          text
      `}

template literals is not working in react

2 Answers