Question 73408 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How can I create a widget using React – Reactjs

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>
  );
});

  2. 0

    Please check my answer to the follwing question:
    Building a Live Chat Widget from Scratch using React

    I’m pretty sure there is all you need to start buildind web widget.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search