[docs] Use Base UI Portal for the quick filter recipe (#10188)

mui · Sep 5, 2023 · a77a7b2 · a77a7b2
1 parent 98ebae7
commit a77a7b2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel'),
-      )}
+      <Portal container={() => document.getElementById('filter-panel')}>
+        <GridToolbarQuickFilter />
+      </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
   );

diff --git a/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx b/docs/data/data-grid/filtering-recipes/QuickFilterOutsideOfGrid.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { Portal } from '@mui/base/Portal';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import { DataGrid, GridToolbarQuickFilter, GridToolbar } from '@mui/x-data-grid';
@@ -8,10 +8,9 @@ import { useDemoData } from '@mui/x-data-grid-generator';
 function MyCustomToolbar(props: any) {
   return (
     <React.Fragment>
-      {ReactDOM.createPortal(
-        <GridToolbarQuickFilter />,
-        document.getElementById('filter-panel')!,
-      )}
+      <Portal container={() => document.getElementById('filter-panel')!}>
+        <GridToolbarQuickFilter />
+      </Portal>
       <GridToolbar {...props} />
     </React.Fragment>
   );