Update NestedModal.js

Signed-off-by: Marija Najdova <[email protected]>
mui · Apr 12, 2023 · 60796e0 · 60796e0
1 parent 4991a3b
commit 60796e0
Showing 1 changed file with 22 additions and 22 deletions.
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
@@ -5,7 +5,7 @@ import { styled, Box } from '@mui/system';
 import ModalUnstyled from '@mui/base/ModalUnstyled';
 import Button from '@mui/base/ButtonUnstyled';
 
-function ChildModal() {
+export default function NestedModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -15,28 +15,28 @@ function ChildModal() {
   };
 
   return (
-    <React.Fragment>
-      <Button onClick={handleOpen}>Open Child Modal</Button>
+    <div>
+      <Button onClick={handleOpen}>Open modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="child-modal-title"
-        aria-describedby="child-modal-description"
+        aria-labelledby="parent-modal-title"
+        aria-describedby="parent-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={[style, { width: '200px' }]}>
-          <h2 id="child-modal-title">Text in a child modal</h2>
-          <p id="child-modal-description">
-            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+        <Box sx={style}>
+          <h2 id="parent-modal-title">Text in a modal</h2>
+          <p id="parent-modal-description">
+            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
           </p>
-          <Button onClick={handleClose}>Close Child Modal</Button>
+          <ChildModal />
         </Box>
       </Modal>
-    </React.Fragment>
+    </div>
   );
 }
 
-export default function NestedModal() {
+function ChildModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => {
     setOpen(true);
@@ -46,24 +46,24 @@ export default function NestedModal() {
   };
 
   return (
-    <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+    <React.Fragment>
+      <Button onClick={handleOpen}>Open Child Modal</Button>
       <Modal
         open={open}
         onClose={handleClose}
-        aria-labelledby="parent-modal-title"
-        aria-describedby="parent-modal-description"
+        aria-labelledby="child-modal-title"
+        aria-describedby="child-modal-description"
         slots={{ backdrop: Backdrop }}
       >
-        <Box sx={style}>
-          <h2 id="parent-modal-title">Text in a modal</h2>
-          <p id="parent-modal-description">
-            Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+        <Box sx={[style, { width: '200px' }]}>
+          <h2 id="child-modal-title">Text in a child modal</h2>
+          <p id="child-modal-description">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit.
           </p>
-          <ChildModal />
+          <Button onClick={handleClose}>Close Child Modal</Button>
         </Box>
       </Modal>
-    </div>
+    </React.Fragment>
   );
 }