How to Break Line in MathJax using ReactJS - reactjs

Question

I'm using MathJax I can't able to break the new line.
I am already tried using <br/> , \nand \\ but its not works for me.
const blockFormula = `x =√(t ) \\
\\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}}`;
MathJax Doc version 1.0.1

Answer 1

The line-breaks you show are for HTML and for regular Latex. MathJax only treats the MATH MODE PART of Latex, not all of Latex so you need to accomplish line-breaks math mode style. You basically have at least 3 options:
Use the math mode gather environment:
<MathJax>
{
`$$\\begin{gather}
x =√(t ) \\\\
\\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}} \\\\
\\end{gather}$$`
}
</MathJax>
Use the math mode align environment if you also want to align the rows:
<MathJax>
{
`$$\\begin{align}
x &=√(t ) \\\\
\\mathrm{V}=\\frac{d x}{d t}&=\\frac{1}{2} t^{\\frac{-1}{2}} \\\\
\\end{align}$$`
}
</MathJax>
Since you're doing this in React with HTML, you can also add the different rows to different HTML / React components to accomplish what you want:
<MathJax>{`$$x =√(t )$$`}</MathJax>
<MathJax>{`$$\\mathrm{V}=\\frac{d x}{d t}=\\frac{1}{2} t^{\\frac{-1}{2}}$$`}</MathJax>
There are probably more ways too.
I took the liberty of using my own better-react-mathjax in the sandbox that I prepared for you, showing all these options using both display math and inline math, but it should work the same in all libraries that correctly uses MathJax with React.