New line characters not displaying as new line on page

Question

I retrieve alert messages from an API and join using the \r\n method. It is joining correctly and logging correctly to the console, however it is not displaying the alerts on a new line. It instead just ignores those characters and goes on to the next part of the string.

Example:

//Thunk
if (warningResults && warningResults.length) {
          dispatch(
            upsertAppNotification(
              AppNotificationsCenter.getNotificationByKey(
                NotificationKeys.CustomerAlertWarning,
                warningResults.join('\r\n')
              ),
              0
            )
          );
        } 

I log the notification to the console and it shows like this:

Message: "Warning Message One\r\nWarning Message Two, 

But it displays on the page like this:

Here's the code that displays the message:

{props.message && (
                <StyledTextBox data-testid={props.messageTestId} maxWidth="80%">
                  <Typography variant="paragraph">{props.message}</Typography>
                </StyledTextBox>
              )}

Answer 1

Wrap your text with pre tag

<pre>
   {message}
</pre>

or add this style: white-space: pre; or white-space: pre-line;