0

I'm currently working on a fairly simplistic error handling system, but it seems my attempt to add newlines is being ignored.

Expected behaviour:

[expression]: errormessage
[expression2]: errormessage2
[expression2]: errormessage3

etc

Current behaviour: [expression]: errormessage [expression2]: errormessage2 [expression2]: errormessage3

Im building my string like this:

    result.map((errorObject) => {
      errorMessage = `${errorMessage} ${errorObject.error}` + "\n";
    });

I have also tried:

    result.map((errorObject) => {
      errorMessage = `${errorMessage} ${errorObject.error}\n`;
    });

After the result.map has finished i return the errorMessage object to my React component for rendering. This component is a simple html p object.

  {validationMessage && validationError && (
    <ErrorMessage>{validationMessage}</ErrorMessage>
  )}

console logs of validationMessage returns:

validationMessage: " [expression]: errormessage\n [epression2] errormessage2\n [expression3]: errormessage3\n"}

Any help with this would be much appreciated. If more information is needed please feel free to ask and i will update the question accordingly.

Mark Veltman
  • 23
  • 3
  • Nothing to do with React. Nothing to do with JavaScript. HTML ignores newlines. It always has. You should either use `
    ` tags for newlines, or add them as them as separate elements (e.g., `

    ` tag for each line) or use a CSS rule to force new lines to show up.

     – VLAZ Aug 02 '21 at 09:55
  • @VLAZ Incorrect tags and title [tags] removed. – Mark Veltman Aug 02 '21 at 10:08

1 Answers1

1

HTML ignores newlines. So instead of trying to map the data and create newlines like that, you should implement it on a component level, how the data is displayed.

You can use p tags (paragraphs) or br (breaks) to create new lines. You may also want to look around here for solutions: Line break in HTML with '\n'

Laczkó Örs
  • 1,082
  • 1
  • 18
  • 38