如何在变量中换行

Question

I'm pretty new to Javascript and I ran into a problem. I tried searching it up to find out how to resolve it but I just don't know the specific terms to search so I couldn't find a solution. I was wondering how to add newlines within a variable so that when you render the variable with HTML, it shows it separate by lines, not just "\n" written out. For example,

let foo = "bob<br>is<br>cool"
return (
    <div>
        {foo}
    </div>
)

In the browser, this shows as "bob< b r >is < b r >cool", without the spaces. How can I format it so that it shows correctly as bob
is
cool? Also, how can I write "bob< b r >is < b r >cool" without the spaces but without having the formatting?

Is it possible to concatenate parts to it as well? How would I do

foo += "hello<br>"

Thanks, sorry if this concept is simple because I somehow didn't stumble upon the solution while searching so I turned to here

Answer 1

It's React?

use dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: foo }}></div>

Answer 2

use dangerouslySetInnerHTML for React

 <div dangerouslySetInnerHTML={{__html: foo}}> ...

Answer 3

If it is REACT,

use dangerouslySetInnerHTML

just like <div dangerouslySetInnerHTML={{ __html: foo }}></div>

here is example below,

function App(){
  const markup={ __html: 'This text is set using </br>dangerouslySetInnerHTML'}
return(
<div dangerouslySetInnerHTML={markup}>
  
  </div>)
  }
ReactDOM.render(<App />, document.querySelector("#root"));