OnLoad property not working

[HediDar]

I'm using the onload property that better-mathjax-react library offers to signal the component that the display of the equation has finished, but this propoerty doesn't work for some reason, so how to solve this problem?

This is the component responsible for displaying the texts:

const myComponent= (props) => {

const config = { tex2jax: { inlineMath: [ ["$", "$"], ["\(", "\)"], ], displayMath: [ ["$$", "$$"], ["\[", "\]"], ], processEscapes: true, }, };

return ( <MathJaxContext onLoad={() => { console.log( "the equation display should end here, but this function never gets called" ); }} config={config} version={2} hideUntilTypeset="first"

{"$" + props.expression.word + "$"}

)}

[fast-reflexes]

Hi there!

It looks like you're using the MathJaxContext wrong. There should only be ONE MathJaxContext in all of your app and judging from you component you seem to include one MathJaxContext in every usage of your component. Try to wrap you entire app in ONE MathJaxContext and you will see that the onLoad property works as expected.

COULD of course add so that this works as well but since it's not the intended use of the MathJaxContext, I'm unsure of whether it is the desired / expected / correct behaviour. I will think about it.

Feel free to study the usage section on how to use this library and let me know if it still doesn't work for you after using it in the expected way :)

https://github.com/fast-reflexes/better-react-mathjax#usage

Sandbox where showing that the onLoad works great:

https://codesandbox.io/p/sandbox/better-react-mathjax-50-gknq9t

[fast-reflexes]

I will close this since I'm sure that onLoad property will be ignored if there are nested MathJaxContexts; only the outermost context which actually downloads MathJax will trigger the onLoad function. I will perhaps add a warning message about onLoad functions in nested MathJaxContext s in the future to make this more obvious.

Feel free to reopen if you think this is wrong.