Html Content set by react showing in console but not in DOM

Question

I am using react by adding react CDN in index.html file in my simple HTML, CSS, and JS editor according to according to this doc React, and it is working fine in my code editor's preview: Code Editor's Preview

But on the main web page, it is not showing the react output set by root.render. My Webpage View

I want my root.render to run two times accurately and show my data as it is showing in the preview. Even the data is showing in the console but not on the page like this: WebPage with console

"like_button_container86551" is the ID of the div in which react app will render, you can access the complete code which I am using here React website file

Answer 1

I don't get the real reason but I solved it with a trick, as data was showing in the console that means that DOM is not showing the updated data so I just assign a key to my div of the content

<span onClick={handleClickOpen} key={contentKey}>
...
</span>

and after the rendering of the component in the useEffect function I increase the key by 1 which means I refresh the DOM element and now the content is shown:

useEffect(() => {
   setContentKey(1 + contentKey);
}, []);