React - insert spaces, tabs and newlines to <pre> element

In this article, we would like to show you how to put spaces, tabs, and newline characters to <pre> element in React.

Quick solution:

<pre>
    Items:{'\n'}
    {'\t'}1st item{'    '}(+){'\n'}
    {'\t'}2nd item{'    '}(+)
</pre>

Practical example

In this example, we use curly braces ({}) to insert spaces ('    '), tabs ('\t') and newline 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'}
            {'\t'}1st item{'    '}(+){'\n'}
            {'\t'}2nd item{'    '}(+)
        </pre>
    );
};

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