Is there a way to pass variable to dangerouslySetInnerHTML in reactjs?

Question

How do I pass {currentyear} to label component?

let text = "<p><span>Year {currentyear}</span></p>";
<Label text={dangerouslySetInnerHTML={{__html: text}}}

Label is a component that takes in text as property and displays it on the document

Obligatory: Do you need to use dangerouslySetInnerHTML here? If that is actual code and not just an example, it seems like you could just nest the labels content normally. — DBS
– DBS, Commented Nov 16, 2021 at 13:53
You said you are getting this string from the JSON response, but how do you expect to get your JS variable inside this JSON response? — Georgy
– Georgy, Commented Nov 16, 2021 at 13:57

David · Accepted Answer · 2021-11-16 14:01:42Z

2

This is just a literal string:

"<p><span>Year {currentyear}</span></p>"

It sounds like you're looking for a template literal:

`<p><span>Year ${currentyear}</span></p>`

This will evaluate the currentyear variable into the resulting string when first setting the text variable.

Edit: In a comment below you indicate that this string value comes from an external source:

"<p><span>Year {currentyear}</span></p>"

Which means it's a string and can't be a template literal. In that case you can simply perform your string replacement manually. For example:

let text = yourString.replace('{currentyear}', currentyear);

The point of all of this is that it's not really a question of "using a variable in dangerouslySetInnerHTML". You're already doing that (using the text variable). What you're trying to do is simply manipulate a string in JavaScript. There is a lot of string functionality you can use.

edited Nov 16, 2021 at 14:01

answered Nov 16, 2021 at 13:50

David

221k42 gold badges247 silver badges338 bronze badges

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

2 Comments

Uthkarsh Cheekati Over a year ago

I'm getting that string from a JSON response.

David Over a year ago

@UthkarshCheekati: Can you clarify that in the question? If there's information about the problem that you share piece-by-piece in response to answers then that's called a "moving target" and it makes answering very difficult.

Collectives™ on Stack Overflow

Is there a way to pass variable to dangerouslySetInnerHTML in reactjs?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related