Bug: function reactFormatter uses ReactDOM.render

[Tabulanga]

I am using React-tabulator along with Next.js. When I need to use function reactFormatter, I get an error:

next-dev.js?3515:20 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

import { ColumnDefinition, reactFormatter, ReactTabulator } from 'react-tabulator';

const columns: ColumnDefinition[] = [
  {
    title: 'Power',
    field: 'powerState',
    formatter: reactFormatter(<PowerIcon />),
  },
];

"next": "13.2.1", "react": "18.2.0", "react-tabulator": "0.18.1"

[rabbit-roger]

I have the same error with React 18.

[Tabulanga]

@ngduc is this repository abandoned?

[martin083]

I am also seeing this….any timeline on a fix? App reverts back react 17 because of this :)

[aleruizj]

This function serves as a workaround for the "ReactDOM.render is no longer supported in React 18" warning. By using createRoot from react-dom/client, it adheres to the new API standard introduced in React 18. Here's the updated reactFormatter function that uses createRoot for rendering components within Tabulator:

I create a PR for this fix

https://github.com/ngduc/react-tabulator/pull/287

import { createRoot } from 'react-dom/client';

function reactFormatter(JSX) {
  return function customFormatter(cell, formatterParams, onRendered) {
    onRendered(() => {
      const cellElement = cell.getElement();
      if (cellElement) {
        cellElement.innerHTML = '';
        const root = createRoot(cellElement);
        root.render(JSX);
      }
    });
    return '<div></div>';
  };
}

[jojulio]

any alternative to deal with this?

[Tabulanga]

abandoned this wrapper and use tabulator-tables directly