user2465134 user2465134 - 1 year ago 143
HTML Question

Formatting code with <pre> tag in React and JSX

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>" };
<div dangerouslySetInnerHTML={ preBlock } />;


Answer Source

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   .