Formatting code with tag in React and JSX

Question

I am trying to use the pre tag inside of JSX.When you use the pre tag in JSX, it doesn\'t format at all. Why? In order to use the pre tag I need to do something like this:

Answer 1

Use template literals

Template literals allow the use of multi-line strings which preserve leading/trailing white-space and new lines.

class SomeComponent extends React.Component {
   render() {
        return (
          
{`
            Hello   ,   
            World   .
          `}
        )
    }
}

class SomeComponent extends React.Component {
   render() {
        return (
          
{`
            Hello   ,   
            World   .
          `}
        )
    }
}

ReactDOM.render(
  , 
  document.getElementById('pre')
)

            Hello   ,
            World   .