diff --git a/src/App.js b/src/App.js
index 907bf6a..e287a3d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,14 +1,17 @@
import React, { useState } from "react";
+import uniqueId from "lodash/uniqueId";
import ContactList from "./components/contact-list";
import AddContact from "./components/add-contact";
const INITIAL_CONTACTS = [
{
+ id: uniqueId(),
name: "Vennila",
phone: "+372 5993789",
email: "venil.par@gmail.com",
},
{
+ id: uniqueId(),
name: "Afrin",
phone: "+372 5663421",
email: "afrin.ven@gmail.com",
diff --git a/src/components/add-contact.js b/src/components/add-contact.js
index 9174962..5641b9e 100644
--- a/src/components/add-contact.js
+++ b/src/components/add-contact.js
@@ -1,4 +1,5 @@
import React, { useState } from "react";
+import uniqueId from "lodash/uniqueId";
import ContactForm from "./contact-form";
const AddContactForm = ({ setContacts, ...props }) => {
@@ -6,6 +7,7 @@ const AddContactForm = ({ setContacts, ...props }) => {
setContacts((contacts) => {
return [
{
+ id: uniqueId(),
...submitData,
},
...contacts,
diff --git a/src/components/contact-list.js b/src/components/contact-list.js
index cf871f3..ff67500 100644
--- a/src/components/contact-list.js
+++ b/src/components/contact-list.js
@@ -6,12 +6,7 @@ const ContactList = ({ contacts, setContacts }) => {
{contacts.map((contact, index) => {
return (
-
+
);
})}
diff --git a/src/components/contact.js b/src/components/contact.js
index e48b804..84d9285 100644
--- a/src/components/contact.js
+++ b/src/components/contact.js
@@ -1,5 +1,6 @@
import React, { useState } from "react";
import cloneDeep from "lodash/cloneDeep";
+import findIndex from "lodash/findIndex";
import EditContact from "./edit-contact";
const Contact = ({ setContacts, ...props }) => {
@@ -13,7 +14,8 @@ const Contact = ({ setContacts, ...props }) => {
if (confirm) {
setContacts((contacts) => {
const clonedContacts = cloneDeep(contacts);
- clonedContacts.splice(id, 1);
+ const index = findIndex(clonedContacts, { id });
+ clonedContacts.splice(index, 1);
return clonedContacts;
});
}
diff --git a/src/components/edit-contact.js b/src/components/edit-contact.js
index 38b0012..41c89af 100644
--- a/src/components/edit-contact.js
+++ b/src/components/edit-contact.js
@@ -1,12 +1,14 @@
import React from "react";
import cloneDeep from "lodash/cloneDeep";
+import findIndex from "lodash/findIndex";
import ContactForm from "./contact-form";
-const EditContact = ({ id = 0, setContacts, ...props }) => {
+const EditContact = ({ id, setContacts, ...props }) => {
const onSubmit = (submitData) => {
setContacts((contacts) => {
const clonedContacts = cloneDeep(contacts);
- clonedContacts[id] = { ...submitData };
+ const index = findIndex(clonedContacts, { id });
+ clonedContacts[index] = { ...clonedContacts[index], ...submitData };
return clonedContacts;
});
};