Render incorrectly

[o-b2-to]

link codesanbox
When I use Better-React-Mathjax both parser text to react dom. I get incorrect text rendering.
In the above example, when I click on the Delete text 123123123123 button I get the old text and the new text appear on 1 line.
What is the solution? Thank you very much!

[o-b2-to]

I think having nested html causes change detection to not work correctly. My temporary solution is to use key={Math.random()} for the MathJax component. but that's bad. Hope a solution can be found soon

[fast-reflexes]

This problem has been documented before and it's due to how React works, even though the resulting problems happen to show here.

Read how to add math content here: https://github.com/fast-reflexes/better-react-mathjax#general-considerations-dont-skip

The React problem is described here: facebook/react#20891 but it has not received any attention.

You're mixing string literals with the math content and this causes the problems you're seeing. Wrap the math content in its own element and it will work as expected, e.g. change </strong> $f(x)$ ????????</p> to </strong> <span>$f(x)$</span> ????????</p>. Always use this approach to math content and you will have less headaches. The more specific details are listed in the link to the better-react-mathjax docs that I added further up :)

[o-b2-to]

@fast-reflexes Great! Thank you very much

[fast-reflexes]

You're welcome... ! Just to clarify, it's not the mix of math and literal strings that is the problem, it's the mix of elements and math where the math content is not inside an element.. it's a bit hard to explain but for example, this works too: <p>Question 1: $f(x)$ ????????</p> because here the entire expression with math is contained in a single element. In your initial example <p><strong>Question 1: </strong> $f(x)$ ????????</p>, the part after the strong element results in an anonymous element in the DOM (a span I think). and this is what's causing the problems.

I will try to make these rules even clearer in the docs, but just be aware of this and that these situations are easily solved by using one of the structures described in the docs (or just wrapping the math in its own element) :)