Formatting code with <pre> 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:

const someCodeIWantToFormat = "var foo = 1" const preBlock = { __html: "<pre>" + pythonCode + "</pre>" }; return(   <div dangerouslySetInnerHTML={ preBlock } />; ) 

Why?

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 (           <pre>{`             Hello   ,                World   .           `}</pre>         )     } } 

class SomeComponent extends React.Component {     render() {          return (            <pre>{`              Hello   ,                 World   .            `}</pre>          )      }  }    ReactDOM.render(    <SomeComponent />,     document.getElementById('pre')  )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>    <!-- The content rendered into this tag should match the content below. -->  <div id="pre"></div>    <pre>              Hello   ,              World   .  </pre>