How to Break Line in MathJax using ReactJS

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

Solution

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.