+ )
+}
+
+export default AddContact
diff --git a/src/components/Contact/ContactCard.js b/src/components/Contact/ContactCard.js
new file mode 100644
index 0000000..93b99f3
--- /dev/null
+++ b/src/components/Contact/ContactCard.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { Link } from 'react-router-dom';
+import icon from '../../images/icon.jpg';
+
+function ContactCard(props) {
+
+ const { id, name, email } = props.contact;
+ console.log(props.contact);
+ return (
+
+
+
+
+
{name}
+
{email}
+
+
+ props.clickHandler(id)}
+ >
+
+
+
+
+
+
+ )
+}
+
+export default ContactCard
diff --git a/src/components/Contact/ContactDetail.js b/src/components/Contact/ContactDetail.js
new file mode 100644
index 0000000..3611764
--- /dev/null
+++ b/src/components/Contact/ContactDetail.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import {Link,useLocation} from'react-router-dom';
+import user from '../../images/user.jpg';
+
+const ContactDetail = (props) => {
+
+ //console.log(location);
+ // HERE DUE TO NEW VERSION OF ROUTER useLocation IS USED AND
+ // FROM CONTACTCARD IN LINK IT TOOK STATE AND THEN IT IS PASSED HERE
+ let location = useLocation();
+ const {name, email} = location.state.contact;
+
+ return (
+