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

Question

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>"

Jack Bashford · Accepted Answer · 2019-05-29 06:52:33Z

1

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

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

answered May 29, 2019 at 6:52

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shahnshah Over a year ago

Just to explain further: the string that I am getting is from an api response, will it then be possible to use template literals and back ticks?

Jack Bashford Over a year ago

You could use replace to do that

shahnshah Over a year ago

Okay, lemme try that

shahnshah Over a year ago

I tried that however it's replacing all the other double quotes, the response from api is like this "<div class="test"><span>Overview</span></div><p><b>testing testing</b></p><p>{this.getValue('a')}, testing</p>"

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related