EN
React - insert spaces, tabs and newlines to <pre> element
0 points
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
1
<pre>
2
Items:{'\n'}
3
{'\t'}1st item{' '}(+){'\n'}
4
{'\t'}2nd item{' '}(+)
5
</pre>
In this example, we use curly braces ({}
) to insert spaces (' '
), tabs ('\t'
) and newline characters ('\n'
) into the <pre>
element.
xxxxxxxxxx
1
//Note: Uncomment import lines during working with JSX Compiler.
2
// import React from "react";
3
// import ReactDOM from "react-dom";
4
5
const App = () => {
6
return (
7
<pre>
8
Items:{'\n'}
9
{'\t'}1st item{' '}(+){'\n'}
10
{'\t'}2nd item{' '}(+)
11
</pre>
12
);
13
};
14
15
const root = document.querySelector('#root');
16
ReactDOM.render(<App />, root);