Reputation: 391
Let's say I have a simple template string :
const foo = `<div>foo</div>`;
How do I go about rendering this template string as HTML ? It renders it as plain text if I do the following :
return({ foo });
Output:
<div>foo</div>
Expected output:
foo
Upvotes: 4
Views: 6964
Reputation: 1
if you want to show the string of html as html page its better to do this:
<text>{{ info | safe }}</text>
Upvotes: 0
Reputation: 27
You note reactjs as a tag here. Instead of specifying the html as a string, make foo a functional react component.
To do that, make sure you have import React as 'react';
.
Then, set foo as the functional component, i.e.:
const foo = () => <div>foo</div>;
Then, you can use that wherever you please. React components are just functions (or classes) that return jsx.
Your question is fairly open-ended, so you may be looking for some of the above answers, but this is one approach.
Upvotes: 1
Reputation: 44118
Off the top of my head there's 2 ways to parse a string (doesn't have to be a tl) into HTML: .innerHTML
property and the more powerful .insertAdjacentHTML()
method.
var tl = `
<video src='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' controls width='320'></video>`;
document.body.innerHTML = tl;
document.body.insertAdjacentHTML('afterbegin', tl);
Upvotes: 0
Reputation: 36219
I think what you try to do is
const foo = `<div>foo</div>`;
<div dangerouslySetInnerHTML={{ __html: foo }}></div>
Upvotes: 6