search

fast-reflexes / better-react-mathjax

MIT License
124 stars 16 forks source link

Render incorrectly #48

Closed bebru2k1 closed 9 months ago

bebru2k1 commented 9 months ago

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!

bebru2k1 commented 9 months ago

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 commented 9 months ago

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: https://github.com/facebook/react/issues/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 :)

bebru2k1 commented 9 months ago

@fast-reflexes Great! Thank you very much

fast-reflexes commented 9 months ago

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) :)