14

I am having trouble rendering a value with custom html inside into an element. ex:

this.title = 'Hello <b> stencil </b>'; << response value from an API

Binding:

<h1>{this.title}</h1>

I am expecting something same as innerHtml behavior in JavaScript.

Mohamad Al Asmar
  • 1,107
  • 1
  • 16
  • 35

2 Answers2

23

You can use

<h1 innerHTML={this.title} />
Jag Reehal
  • 302
  • 2
  • 2
-2

This is not a good practice in JSX, it is against the idea of virtual DOM and it's not creating virtual nodes.

You should try like this 

this.salute = 'Hello';
this.name='stencil';

Binding

<h1>{this.salute} <b>{this.name}</b></h1>

Or if it is a more complex situation, build another smaller component.

However using innerHTML will work, but should be used in different situations more details here(at the bottom of the page).

Cristian Tr
  • 716
  • 1
  • 7
  • 25
  • The title value is coming from a server response – Mohamad Al Asmar May 09 '18 at 09:07
  • 1
    This shouldn't have been down-voted imo. While it doesn't answer the question as-asked, it does highlight that the question is [an XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem), and the solution is actually "don't put HTML in your content if you can avoid it". Allowing HTML in the content you pull from the server is a slippery slope: what happens when that HTML is invalid? Sure, there are cases where it can't be avoided, but those should be the exception -- not the rule. This answer does a good job of explaining that. – Eric Seastrand Mar 04 '19 at 13:24
  • yes this answer should be upvoted. This question could be an security issue, look here: https://cwe.mitre.org/data/definitions/116.html – Huluvu424242 Jan 05 '22 at 21:31