CODEWITHSUNDEEP
javascripthtmlreactjsecmascript-6jsx
shahnshah
shahnshah

Reputation: 778

How to parse html string to JSX client side with variable and function call

html = "<p>Hello {this.getValue("a")}</p>"

Basically what I want to achieve is the value returned by the getValue() function once the html is rendered.

I tried react HTML parser however this shows the function name as it is written in the code.

I also tried dangerouslySetInnerHTML like below: 

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

The result with "dangerouslySetInnerHTML" is the same string 

Hello {this.getValue("a")}

Also the string is from an api response

example: "<div class="test"><span>Overview</span></div><p><b>testing testing</b></p><p>{this.getValue('a')}, testing</p>"

Upvotes: 0

Views: 294

Answers (1)

Jack Bashford
Jack Bashford

Reputation: 44125

Use template literals - use backticks `` and ${}:

const getValue = arg => arg + arg;
const html = `<p>Hello ${getValue("a")}</p>`;
document.write(html);

Upvotes: 1

Related Questions