To display math latex values, I'm using react-hook-mathjax.
It works perfectly when I pass a direct latex value to the Tex2SVG component. Taking a value from a variable and then assigning it to Tex2SVG does not work.
Here is the link to codesanbox- https://codesandbox.io/s/nervous-breeze-pq7bhk?file=/src/App.js
import "./styles.css";
import Tex2SVG from "react-hook-mathjax";
export default function App() {
const latex = "x = {-b pm sqrt{b^2-4ac} over 2a}";
return (
<div className="App">
{/* This works fine */}
<Tex2SVG display="inline" latex="x = {-b \pm \sqrt{b^2-4ac} \over 2a}" />
<br />
{/* Not working with dynamic value */}
<Tex2SVG display="inline" latex={latex} />
</div>
);
}
Could someone please guide me through the process of executing dynamic values? I need to pass dynamic values. PS: I double-checked that in the library code values are passing correctly, but I'm not sure if there's anything else I'm missing.
The string you supply in the variable does not have the same contents as the literal, perhaps you should make sure they're the same? It works if you change it to:
let latex = "x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}";
If you're unable to accomplish what you want in terms of dynamic updates, I may suggest using better-react-mathjax which I wrote. There the MathJax component typesets its content whenever a component mounts. The following accomplishes the same as above with SVG output and inline elements:
import "./styles.css";
import React, { useState } from "react";
import { MathJax, MathJaxContext } from "better-react-mathjax";
export default function App() {
const [latex, setLatex] = useState(
"$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$"
);
const config = {
tex: {
inlineMath: [["$", "$"]],
displayMath: [["$$", "$$"]]
}
};
return (
<MathJaxContext
config={config}
src={"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"}
>
<div className="App">
<MathJax inline>{"$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$"}</MathJax>
<br />
<MathJax inline>{latex}</MathJax>
</div>
</MathJaxContext>
);
}
If you ALSO supply the dynamic flag you can update the content after mount and the content will be typeset again:
<div className="App">
{ /* Will NOT typeset again when the button is clicked */ }
<MathJax inline dynamic={false}>{latex}</MathJax>
<br />
{ /* Will typeset again when the button is clicked */ }
<MathJax inline dynamic>{latex}</MathJax>
<br />
<button onClick={() => setLatex("$\\sqrt{10^4}$")}>Update math</button>
</div>
Finally, you could also supply all of the content in one single component:
<MathJax dynamic>
<span>{"$x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}$"}</span>
<br />
<span>{ latex }</span>
</MathJax>
It has a bit of a different style than the library you're currently using, don't know which you prefer.
Here is a sandbox that you can fiddle around with: Sandbox