Formatting code with <pre class = "prettyprint-override"> tag in React and JSX

Question

I am trying to use a pre-tag inside JSX. When you use a preliminary tag in JSX, it is not formatted at all. What for? To use the preliminary 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 pattern literals

Template literals allow you to use multi-line strings that preserve leading / trailing white spaces 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> <div id="pre"></div> <pre> Hello , World . </pre> 

Answer 2

Gfullam posted a great answer.

I will expand it a bit and provide some alternative solutions. Most of them are probably too large for your particular case. However, I believe that you (and potential future readers) might find them useful. Please note that this requires ES6.

---

Literary expression pattern

Since you already have the code stored in the variable, you can use the template literal expression. This may be preferable if you have many variables or want to control your output.

 class SomeComponent extends React.Component { render() { var foo = 1; var bar = '"abc"'; return ( <pre>{` var foo = ${foo}; var bar = ${bar}; `}</pre> ) } } ReactDOM.render( <SomeComponent />, document.getElementById('content') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="content"></div> 

This may not be required in this particular implementation, but it may be useful to know that you can also make function calls and other operations in parentheses.

Codepen

---

Template Label Literals

If you don’t want to manually add line breaks, half-columns, and other code formatting for your <pre> , you can use the Tagged Template Literal listing to return the correct result for you. Just provide it with variables for output!

 class SomeComponent extends React.Component { pre(strings, variables) { return variables.map((v, i) => { return `var ${v.name} = ${v.value}; ` }) } render() { var variables = [{name: "foo", value: 1},{name: "bar", value: '"abc"'}]; return <pre>{this.pre`${variables}`}</pre>; } } ReactDOM.render( <SomeComponent />, document.getElementById('content') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="content"></div> 

PS: Isn't it amazing !?

Codepen