1

In my application, I wrote a custom component to display the header and subheader for each page. See code below:

      <H 
        header = "Header" 
        subheader = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, \
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      />

Problem: I want to split the string across multiple lines, so I added a backslash \ as suggested to do in this source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal.

However, when the page is rendered the \ is included in the subheader text.

How can I have multiple line string with the correct text displaying?

Note: I also tried in single vs double quotes and tried using the +operator.

Update: I got it to work by adding `` between the text and by placing {} around everything.

user19251203
  • 322
  • 4
  • 13
  • 1
    Read the part about not putting any spaces/indents after the \. A more modern solution might be to enclose the text in backticks `\`\`` – James Jun 09 '22 at 20:50
  • Check out these answers [here](https://stackoverflow.com/questions/50229792/adding-a-new-line-in-a-jsx-string-inside-a-paragraph-react). They are kinda similar. Hope it helps =D – Thamy Bessa Jun 09 '22 at 20:54
  • @ThamyBessa I want the text to appear in a single line, but I want the string in the IDE to be split into multiple lines – user19251203 Jun 09 '22 at 21:01
  • @James I did not have any spaces/indents after the \. There are no errors reported, but the \ is still present. I even copied and pasted their string from the website, and the \ are still present. – user19251203 Jun 09 '22 at 21:02
  • @user19251203 which IDE are you using? – Thamy Bessa Jun 09 '22 at 21:10
  • VS code @ThamyBessa – user19251203 Jun 09 '22 at 21:13
  • It looks like you have `...elit, \sed...` It might not be relevant. – James Jun 09 '22 at 21:35
  • @james I am not sure what the signifies, do you have any other suggestions? – user19251203 Jun 10 '22 at 12:55
  • Did you try using backticks? – James Jun 10 '22 at 13:12
  • @James i also tried the backtick example like the one in the site. I also tried backtick with the \, just in case. Both have errors. – user19251203 Jun 10 '22 at 13:38
  • @user19251203 So you just want the lines wrapped in your VS code not actually on the displayed component right? If so, I think you can configure your VS code for it like in [this answer](https://stackoverflow.com/questions/40781973/what-is-the-property-name-to-break-long-lines-in-vs-code). Hope it helps =D – Thamy Bessa Jun 10 '22 at 18:25

0 Answers0