Rendering new line or line breaks in a template literal?

Question

I am trying to build a tool to convert a .CSV into formatted html code for production purposes. I have built the functionality of converting the file into a template literal using .map() and React. When the browser renders the string it is one long line, and I want to format the render to make it easier to implement and edit. I have tried introducing <br> and '\n' and see no change in the render. Are there any other methods to introduce a line break?

Code:

...
 {contacts.map((contact) => (
          `<p>Description<br>
        <a class="link__external" href="${contact.url}" target="_blank">${contact.Name}</a>
        &ensp;<a href="tel:">${contact.phoneNumber}
        </a></p>`
        ))}
...

Browser render:

<p>Description<br> <a class="link__external" href="https://www.google.com/" target="_blank">Hello</a> &ensp; <a href="tel:">000-000-0000 </a></p>

Why are you wrapping everything in a string? Return JSX from the map, not a string. — 3limin4t0r, Dec 07 '20 at 18:42
I need the rendered elements to be in HTML syntax for the other users to be able to copy paste the information into another system. Exporting as a string was my solution to avoiding the browser from rendering the html code. — SNMLN, Dec 07 '20 at 18:47

score 0 · Answer 1 · answered Dec 07 '20 at 18:37

0

you should use dangerouslySetInnerHTML attribute.

full answer: https://stackoverflow.com/a/19277723/10039122

answered Dec 07 '20 at 18:37

Yasin Tazeoglu

884
8
14

score 0 · Answer 2 · answered Dec 07 '20 at 21:12

If you don't mind the added data-reactroot attribute, you could render the React components as string using. ReactDOMServer.renderToString() then beautify the output string using something like js-beautify.

const contacts = [{
  url: "https://www.google.com/",
  Name: "Hello",
  phoneNumber: "000-000-0000",
}];

const html = html_beautify(ReactDOMServer.renderToString(
  contacts.map((contact) => (
    <p>
      Description<br />
      <a class="link__external" href={contact.url} target="_blank">{contact.Name}</a>
      <a href="tel:">{contact.phoneNumber}</a>
    </p>
  ))
), {
  inline: [],
  indent_size: 2,
  wrap_attributes: "force",
});


ReactDOM.render(<pre>{html}</pre>, document.querySelector("#contacts"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom-server.browser.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.13.0/beautify-html.min.js"></script>

<div id="contacts"></div>

Rendering new line or line breaks in a template literal?

Code:

Browser render:

2 Answers2