2

Problem - I see raw HTML code outputted as a string. Currently th data is stored in an object

Data

const data = [
  {
   title: "Hello"
   body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>"
   }
]

Child component

<div>
<h3>{props.title}</h3>
{props.body}
</div>

Heres what gets outputted in browser (includes <p>)

Hello

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean est mauris, tempor at aliquam vitae, mattis iaculis ex. Donec suscipit enim non nisi maximus, vel tincidunt ex accumsan</p>

How can I render the content so that the

is interpreted as a html element in the browser and not a string?

Samuel
  • 5,529
  • 5
  • 25
  • 39
  • You basically want to find another way of doing whatever it is you're doing. Yes, React does provide `dangerouslySetInnerHtml` as an escape hatch, but it's got "dangerous" in the name, and is unintuitive to use quite deliberately, to make you think twice. You must *never* use this if the content of that prop can be set by users or another untrusted source, and even if that's not the case there is very likely a cleaner, safer way to do what you want. – Robin Zigmond Apr 03 '22 at 16:01
  • What's your use case here? Is this HTML coming from an external source like a CMS? – Nick Bailey Apr 03 '22 at 16:50
  • @aloisdg sort of actually. I got it working with JSX . I didn't realise it was possible – Samuel Apr 03 '22 at 21:40
  • @NickBailey The HTML will be static for now. Eventually users will be able to upload their own text. Additionally, the component I'm loading this text to will have a copyClipboard functionality. – Samuel Apr 03 '22 at 21:42
  • And the input they provide will be raw HTML, not some sort of markup? You should be aware that that is a huge security risk, since unvalidated user html input can easily execute arbitrary code in the browser. – Nick Bailey Apr 04 '22 at 00:27

0 Answers0