On a ReactJs project I try to parse with com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {}); function.

According to the docs, that function is to be applied to specific elements on the DOM. In the samples with pure javascript, they first set innerHTML of dom element and then apply the function.

So I thought that it would be handled using refs in React. (not sure if its the best way)

I have an array which includes some string to be rendered as html. I took all refs as an array with useRef([]) and then set each element's ref using refs.current[index]

According to the type I directly render string with dangerouslySetInnerHTML or use a wrapper component to render with a child component on which I would use that special function.

But I couldn't reach innerHTML property of the ref before applying the function in the WirisWrapper. I tried ref.innerHTML and ref.current.innerHTML

Parser as Parent

import { useRef, createRef } from 'react';
import WirisWrapper from './WirisWrapper';

const Parser = ({ itemsArray }) => {
    let refs = useRef([]);

    refs.current = itemsArray.map((ref, index) => (refs.current[index] = createRef()));

    return (
        <div>
            {itemsArray.map((item, index) =>
                item.type === 'math' ? (
                    <WirisWrapper
                        ref={el => (refs.current[index] = el)}
                        key={index}
                        mString={item.html}
                    />
                ) : (
                    <div key={index} dangerouslySetInnerHTML={{ __html: item.html}}>
                    </div>
                )
            )}
        </div>
    );
};

export default Parser;

WirisWrapper as Child

import { forwardRef, useEffect } from 'react';

const WirisWrapper = forwardRef((props, ref) => {
    const { mString } = props;

    useEffect(() => {
        if (ref.current && com.wiris.js.JsPluginViewer) {
            ref.current.innerHTML = mString;
            com.wiris.js.JsPluginViewer.parseElement(ref, true, function () {});
        }
    }, [ref, com.wiris.js.JsPluginViewer]);

    return <div ref={ref}></div>;
});

export default WirisWrapper;