Integrate with jsx MathML

[ryanehlers]

In React it's possible to return MathML from a jsx function like:

import React from 'react';

function oneThird() {
  return (
    <math>
      <mfrac>
        <mn>1</mn>
        <mn>3</mn>
      </mfrac>
    </math>
  );
}

Is it possible to integrate this with the <MathJax /> component?

My current work-around is to convert the MathML to a string with ReactDOMServer.renderToString():

render() {
  <MathJax math={ReactDOMServer.renderToString(oneThird())} />;
}

[mehdisadeghi]

@ryanehlers if you put raw MathML inside a react component, react will render it, however for MathJax to function properly we need to pass String to the underlying MathJax library.

I thought perhaps one could do something like this:

<MathJax>
    <math>
      <mfrac>
        <mn>1</mn>
        <mn>3</mn>
      </mfrac>
    </math>
<MathJax>

For this to work we need to extract children as string. With a quick search I found jsx-to-string but I was unable to extract the MathML.

If you can fix it, send me a PR. I'd be happy to merge it!

[mehdisadeghi]

I'll close this as a wontfix since the component (and MathJax) needs a string for typesetting. Moreover, your workaround looks perfectly fine to me. There is also Algolia's react-element-to-jsx-string which might be interesting.