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 localization library, but other localization libraries likely have similar options for including HTML in messages.

The localization message:

"common.welcome": "Welcome!{br}Glad to see you again!"

The usage in the code:

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.