---
title: "How to add a newline to a localization message in React?"
description: "Learn how to add newlines to localization messages in React with this easy guide."
category: react
date: 2023-03-17
updated: 2026-10-09
canonical: https://localizely.com/i18n-questions/react/how-to-add-a-newline-to-a-localization-message-in-react/
---

# How to add a newline to a localization message in React?

When you're working with localization messages in React, it's important to remember that by default, web browsers don't recognize the `\n` character as a line break. This can cause problems with the formatting of your messages.

One way to solve this problem is to set the `white-space` CSS property to `pre-line`, which tells the browser to treat `\n` as a line break. However, this approach may cause unexpected issues in some situations, so it's not always the best choice.

A better approach is to put a placeholder such as `{br}` in your localization message where line breaks should occur. Then, when you format the message, pass a `<br/>` element as the value of that placeholder. The message is rendered with real `<br/>` elements in place of the placeholder, so the browser displays the line breaks correctly.

The example below uses the [react-intl](https://www.npmjs.com/package/react-intl) localization library, but other localization libraries likely have similar options for including HTML in messages.

The localization message:
```json
"common.welcome": "Welcome!{br}Glad to see you again!"
```

The usage in the code:
```javascript
const intl = useIntl();
const message = intl.formatMessage({ id: "common.welcome" }, { br: <br/> });
```

Note that writing a literal `<br/>` inside the message does not work with react-intl, because its message parser treats a self-closing tag as plain text.

Source: https://localizely.com/i18n-questions/react/how-to-add-a-newline-to-a-localization-message-in-react/