From 2c1216f1ba8ed5ba997f51acfc97831aa4f62acd Mon Sep 17 00:00:00 2001
From: Andrew Horn <arhorn@smcm.edu>
Date: Thu, 5 Aug 2021 11:08:01 -0500
Subject: [PATCH] Update example-react-modal.mdx

Previous version of this file what seemed to use an older syntax of `testing-library`. It involved direct DOM manipulation and use of ReactDOM. I corrected it to what I believe is the more modern way to test a Modal in `testing-library`. If I have something wrong, please let me know. Thanks!
---
 docs/example-react-modal.mdx | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/docs/example-react-modal.mdx b/docs/example-react-modal.mdx
index 9bccf105a..5ad2770cb 100644
--- a/docs/example-react-modal.mdx
+++ b/docs/example-react-modal.mdx
@@ -4,32 +4,18 @@ title: Modals
 ---
 
 ```jsx
-import React, {useEffect} from 'react'
-import ReactDOM from 'react-dom'
-import {render, fireEvent} from '@testing-library/react'
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
 
-const modalRoot = document.createElement('div')
-modalRoot.setAttribute('id', 'modal-root')
-document.body.appendChild(modalRoot)
-
-const Modal = ({onClose, children}) => {
-  const el = document.createElement('div')
-
-  useEffect(() => {
-    modalRoot.appendChild(el)
-
-    return () => modalRoot.removeChild(el)
-  })
-
-  return ReactDOM.createPortal(
+const Modal = ({ onClose, children }) => {
+  return (
     <div onClick={onClose}>
       <div onClick={e => e.stopPropagation()}>
         {children}
         <hr />
         <button onClick={onClose}>Close</button>
       </div>
-    </div>,
-    el,
+    </div>
   )
 }
 
@@ -38,10 +24,10 @@ test('modal shows the children and a close button', () => {
   const handleClose = jest.fn()
 
   // Act
-  const {getByText} = render(
+  const { getByText } = render(
     <Modal onClose={handleClose}>
       <div>test</div>
-    </Modal>,
+    </Modal>
   )
   // Assert
   expect(getByText('test')).toBeTruthy()
@@ -52,4 +38,5 @@ test('modal shows the children and a close button', () => {
   // Assert
   expect(handleClose).toHaveBeenCalledTimes(1)
 })
+
 ```