How to add a component to an html element?

Question

React

There is markup markup, which I receive from the server. Is it possible to insert React components there?

prepareMoreBlocks = (arrId) => {
        if (typeof document !== "undefined") {
            let readMoreBlocks = document.getElementsByClassName("readmore-snippet-container");

            for (var i = 0; i < readMoreBlocks.length; i++) {
                let linkEl = readMoreBlocks[i].querySelector('a');

                if (linkEl) {
                    //arrId.push(linkEl.dataset.id);

                    //console.log(linkEl.);

                    linkEl.appendChild(<Badge
                        className={'news-card-item__list-badges-item'}
                        type={'sound-wave'}
                        //key={badge}
                    />)
                }
            }
        }
    };

I am getting an error:

Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Answer 1

you can try to convert the component as for ssr
https://reactjs.org/docs/react-dom-server.html#ref...