React 16 HTML attributes with MathML tags

Question

I'm using MathML markup language to render math equations on my web app. Here's an example of an simple equation which is problematic:

<math xmlns="http://www.w3.org/1998/Math/MathML"><mfenced open="[" close="]"><mn>8</mn></mfenced></math>

The problem is that React will not treat the attributes of the mfenced tag like we would want to. It treats the "open" attribute as if it was used in a HTML context, so it will not accept its "[" value. React will output the mfenced tag like this:

<mfenced open close="]"><mn>8</mn></mfenced>

Of course, this breaks the equation in the browser. Is there a way to tell React not to change this attribute?

Answer 1

The MathJax React component is what you were looking for.

Import the package and fill the math property with some text containing your formals. Wrap TeX in $ or $$ and ASCIImath in `. Paste MathML as is.

Here's an example:

import React, {Component} from 'react'
import {render} from 'react-dom'
import MathJax from 'react-mathjax-preview'

const asciimath = '`sum_(i=1)^n i^3=((n(n+1))/2)^2`' # Because of the backtick
const math = String.raw`
  <math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
    <menclose notation="circle box">
      <mi> x </mi><mo> + </mo><mi> y </mi>
    </menclose>
  </math>

  $$\lim_{x \to \infty} \exp(-x) = 0$$

  ${asciimath}`

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      math: tex
    }
  render() {
    return <MathJax math={this.state.math} />
  }
}

They also have a more advanced demo inside the repository.

PS: I saw one issue related to MathML in their repo. A workaround is described there.