React - insert spaces to <pre> element

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

Quick solution:

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

Practical example

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

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