How can I render HTML from a string?

Question

I have a database variable from which I get this, for example:

hello, `<br />` have a good day,

It prints the <br /> to my screen. How could I tell html that
is a line break?

My variable is called greeting and it is an array from which I use a for to print everything, but I used that little text as an example.

So I tried with innerHTML but it doesn't work:

  <i id="break" class="textTitle">{{ greeting }}</i>
      <script>
         document.getElementById("break").innerHTML = "<br/>";
      </script>

It should work just fine without any changes. It's probably your CSS that overrides this behavious. — Konrad, Aug 24 '22 at 16:15
Your question was confusingly specific. It doesn't really relate to line breaks, but HTML in general. I've revised the title to ask a more general question. — isherwood, Aug 24 '22 at 16:24
Does your string actually have backticks in it, or was that just an attempt at formatting in this post? — isherwood, Aug 24 '22 at 16:26
Your embedded script element is an anti-pattern with respect to React. It might help if you'd provide a bit more context. — isherwood, Aug 24 '22 at 16:27
thanks for your help, but it still doesn't work for me :(, I have this text in a timeline, I already tried to modify the css as you mention but I don't know what the error is — ALAIN TORRES, Aug 24 '22 at 17:56

score 1 · Answer 1 · edited Aug 24 '22 at 16:21

1

Use the dangerouslySetInnerHTML prop:

<i id="break" class="textTitle" dangerouslySetInnerHTML={greeting}></i>

Your original code uses innerText under the hood to set the content of the element. That's why it gets interpreted as text instead of HTML code.

<i id="break" class="textTitle">{{ greeting }}</i>

edited Aug 24 '22 at 16:21

isherwood

answered Aug 24 '22 at 16:18

kess

Thanks for your answer, I tried like this but it doesn't work :( – ALAIN TORRES Aug 25 '22 at 03:03
Your question had react in the tags so I provided a solution for react, but I see now that you changed it to angular – kess Aug 25 '22 at 08:53

score -1 · Answer 2 · answered Aug 24 '22 at 16:24

-1

In must be something to do with the way you interpreter is treating the text, as this should normally work fine:

document.getElementById("break").innerHTML = "<br/>";

<body>
 <h1>Hi</h1>
 <h1 id="break"></h1>
 <h1>There</h1>
</body>

answered Aug 24 '22 at 16:24

Gamaray

thanks for your reply, i tried that way but it doesn't work :( – ALAIN TORRES Aug 25 '22 at 03:03

2 Answers2