React - insert newlines to <pre> element

In this article, we would like to show you how to put newlines to <pre> element in React.

Quick solution:

<pre>
    Items:{'\n'}
     - 1st item{'\n'}
     - 2nd item
</pre>

Practical example

In this example, we use curly braces ({}) to insert new line characters ('\n') into the <pre> element.

// ONLINE-RUNNER:browser;

//Note: Uncomment import lines during working with JSX Compiler.
// import React from "react";
// import ReactDOM from "react-dom";

const App = () => {
    return (
        <pre>
            Items:{'\n'}
             - 1st item{'\n'}
             - 2nd item
        </pre>
    );
};

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);