Breakline in JSX

Question

I store every text in my application in a settings.ts file, but I need to add some breaklines and \n appears not to work. Is there any other way I should could these breaklines? I'm working with Next.js, React and TypeScript.

export const text = 'this is my text that \nshould have a breakline'

<div>{text}</div>

You need some CSS magic: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space — zoran404, Aug 30 '22 at 14:49

score 0 · Answer 1 · answered Aug 30 '22 at 14:48

0

Instead of using \n, you can use another option <br/>.

answered Aug 30 '22 at 14:48

Mart

36
2

score 0 · Answer 2 · answered Aug 30 '22 at 15:26

You can set white-space to pre-wrap

const text = 'this is my text that \nshould have a breakline'

const App = () => <div className="break">{text}</div>

ReactDOM.render(
    <App />,
    document.getElementById("root")
);

.break {
  white-space: pre-wrap;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Breakline in JSX

2 Answers2