How can I create a widget using React

Question

I am trying to create a widget which can be plugged to any website, just like some chat widget. I am trying to below but getting error:

const widgetDivs = document.querySelectorAll('.proc_widget');

   widgetDivs.forEach((div) => {
      ReactDOM.render(
        <React.StrictMode>
          <App symbol={div.dataset.symbol} />
        </React.StrictMode>,
        div
      );
    });


 ERROR:  Uncaught TypeError: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

I was referring this: https://tekinico.medium.com/build-a-react-embeddable-widget-c46b7f7999d8

but looks like this is old post and I am using latest version of react, which directly render root. can someone please share me some idea to make a widget and bundle it.

Answer 1

I fixed it by doing below:

const widgetDivs = document.querySelectorAll('.proc_widget');

widgetDivs.forEach((div) => {
  const root = ReactDOM.createRoot(div);
  root.render(
    <React.StrictMode>
      <App symbol={div.dataset.symbol} />
    </React.StrictMode>
  );
});