Add some modifications

snippets/Modal.md

@@ -12,8 +12,6 @@ The Modal Component has following attributes:
 - `footer`, JSX elements to be rendered in modal footer.(optional)
 - `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required)
 
-
-
 ```css
 .modal {
   position: fixed;
@@ -84,16 +82,13 @@ The Modal Component has following attributes:
 }
 ```
 
-
 ```jsx
 function Modal(props){
   const { isVisible, title, content, footer, onClose } = props;
   
-  useEffect(() => {
+  React.useEffect(() => {
     document.addEventListener('keydown', keydownHandler);
-    return () => {
+    return () => document.removeEventListener('keydown', keydownHandler);
-      document.removeEventListener('keydown', keydownHandler);
-    };
   });
 
   function keydownHandler({ key }) {
@@ -123,14 +118,26 @@ function Modal(props){
 ```jsx
 //Add the component to render function
 
-ReactDOM.render(
+function App() {
+  const [ isModal, setModal] = React.useState(false);
+  
+  return (
+    <React.Fragment>
+      <button onClick={()=> setModal(true)}>xx</button>
       <Modal 
-    isVisible={false}
+        isVisible={ isModal }
         title= "Modal Title"
-    content={<p>The content goes here</p>}
+        content = {<p>Add your content here</p>}
         footer = {<button>Cancel</button>}
-    onClose ={()=> } //Add action to hide modal
+        onClose ={()=> setModal(false)}
-/>,
+      />
-  document.getElementById('root')
+    </React.Fragment>
-);
+  )
+}
+
+ReactDOM.render( <App/>, document.getElementById('root'));
 ```
+
+<!-- tags: modal -->
+
+<!-- expertise: 1 -->