[Edit]

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

1 contributors

2 contributions

0 discussions

0 points

Created by:

Ela-Davey

663

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

Quick solution:

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

Practical example

Edit

In this example, we use curly braces ({}) to insert spaces (' '), tabs ('\t') and newline characters ('\n') into the <pre> element.

xxxxxxxxxx
 
//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);