Add some modifications

snippets/Modal.md

@@ -9,10 +9,8 @@ The Modal Component has following attributes:
 - `isVisible`, Boolean describing if the modal should be shown or not.(Required)
 - `title`, String describing title of Modal.(Required)
 - `content`, JSX elements to be rendered in modal body.(Required)
-- `footer`, JSX elements to be rendered in modal footer. (optional)
+- `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)
+- `onClose`, Function that will be called when Modal needs to be closed like when escape key is pressed.(Required)
-
-
 
 ```css
 .modal {
@@ -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 }) {
@@ -105,7 +100,7 @@ function Modal(props){
 
   return !isVisible ? null : (
     <div className="modal" onClick={onClose}>
-        <div className="modal-dialog" onClick={e => e.stopPropagation()}>
+        <div className="modal-dialog"  onClick={e => e.stopPropagation()}>
         <div className="modal-header">
           <h3 className="modal-title">{title}</h3>
           <span className="modal-close" onClick={onClose}>&times;</span>
@@ -123,14 +118,26 @@ function Modal(props){
 ```jsx
 //Add the component to render function
 
-ReactDOM.render(
+function App() {
-  <Modal 
+  const [ isModal, setModal] = React.useState(false);
-    isVisible={false}
+  
-    title= "Modal Title"
+  return (
-    content={<p>The content goes here</p>}
+    <React.Fragment>
-    footer={<button>Cancel</button>}        
+      <button onClick={()=> setModal(true)}>xx</button>
-    onClose ={()=> } //Add action to hide modal
+      <Modal 
-/>,
+        isVisible={ isModal }
-  document.getElementById('root')
+        title= "Modal Title"
-);
+        content = {<p>Add your content here</p>}
+        footer = {<button>Cancel</button>}
+        onClose ={()=> setModal(false)}
+      />
+    </React.Fragment>
+  )
+}
+
+ReactDOM.render( <App/>, document.getElementById('root'));
 ```
+
+<!-- tags: modal -->
+
+<!-- expertise: 1 -->