How to have newlines/line breaks within a const string?

Question

I have a string declared as a const in React JS. And I am trying to display it but the appropriate newlines/line breaks aren't not working properly. I tried putting \n within the string itself but it doesn't work and I'm hoping to get some help.

The String Variable itself

const CODE_EXAMPLE = `
const CHECKBOX = {
LABEL: {
    content: SECONDARY_GLOBAL_TEXT,
    disabled: {
      content: SECONDARY_GLOBAL_DISABLED_TEXT
    }
  },
  ERROR_MESSAGE: {
    content: SECONDARY_GLOBAL_ERROR_TEXT
  },
  checked: {
    icon: PRIMARY_GLOBAL_BASE,
    background: TRANSPARENT,
    hover: {
      icon: PRIMARY_GLOBAL_BASE,
      background: SECONDARY_GLOBAL_HOVER,
    },
    disabled: {
      icon: SECONDARY_GLOBAL_DISABLED_CONTENT
    }
  },
}
`;

How I am rendering it

<div className="gray-background">
  {CODE_EXAMPLE} 
</div>

This is what it currently looks like:

This is what it's supposed to look like:

score 2 · Answer 1 · answered Jul 01 '21 at 14:19

2

This is an HTML feature, it collapses any extra spaces/new lines by default. You can use tag pre to see the text as is.

answered Jul 01 '21 at 14:19

Evgeny Zaytsev

198
5

score 1 · Answer 2 · answered Jul 01 '21 at 14:19

1

You may be able to accomplish this through css via white-space: pre

This post goes over some options.

answered Jul 01 '21 at 14:19

iamaword

1,327
8
17

score 0 · Answer 3 · answered Jul 01 '21 at 14:18

0

\n will not work in JSX. In this case, I would suggest splitting the lines used with special characters.

answered Jul 01 '21 at 14:18

Manimegalai V

11
4

How to have newlines/line breaks within a const string?

3 Answers3