You need to display the following content formatted on the screen:
divs:
<div>my text</div> <div>my text</div>
i tried to do this, but everything came out without line break:
const HtmlCreator=()=>{
let text="my text";
return (`divs: \n <div>${text}</div> <div>${text}</div> `)
{
return (
<div>
<p><HtmlCreator/></p>
</div>
)
Add whiteSpace:'pre' to your style :
<p style={{whiteSpace:'pre'}}><HtmlCreator /></p>
this is useful when you cannot modify the original data.
You can use <br />, but you'll need a wrapper. For that, you can use <React.Fragment>:
import React, { Fragment } from "react";
const HtmlCreator = () => {
let text = "my text";
return (
<Fragment>
divs
<br />
{`<div>${text}</div> <div>${text}</div>`}
</Fragment>
);
};
Your question implies you'd like to show the HTML itself (escape it) and not render it. If you meant the latter, you could do:
const HtmlCreator = () => {
let text = "my text";
return (
<Fragment>
divs
<br />
<div>{text}</div>
<div>{text}</div>
</Fragment>
);
};
