How to parse Jsx String with expressions using dangerouslySetInnerHTML in React?

Question

dangerouslySetInnerHTML is converting static html content properly but it is unable to evaluate expressions.

output:

How to evaluate expressions as well using dangerouslySetInnerHTML?

Answer 1

You can replace {some expression} with the evaluated content.

The example below uses string-math to turn the template html into the intended result. Your implementation would do this transformation for the dangerouslySetInnerHTML .

It uses a regex to find { something }. The .slice(1, -1) is needed to slice off the { and } .

 const templateStr = '<h2>Math --> {1 + 1}</h2>' document.getElementById('div').innerHTML = templateStr.replace(/{[^}]+}/g, str => stringMath(str.slice(1, -1)))

 <script src="https://cdn.jsdelivr.net/npm/string-math@1.2.2/string-math.js"></script> <div id='div'></div>