feat: Bug fix: 1: Try to add same name and resolve the error in the c…

…onsole

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: "[email protected]",
   },
   {
+    id: uniqueId(),
     name: "Afrin",
     phone: "+372 5663421",
     email: "[email protected]",

src/components/add-contact.js

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
+import uniqueId from "lodash/uniqueId";
 import ContactForm from "./contact-form";
 
 const AddContactForm = ({ setContacts, ...props }) => {
   const onSubmit = (submitData) => {
     setContacts((contacts) => {
       return [
         {
+          id: uniqueId(),
           ...submitData,
         },
         ...contacts,

src/components/contact-list.js

@@ -6,12 +6,7 @@ const ContactList = ({ contacts, setContacts }) => {
     <ol>
       {contacts.map((contact, index) => {
         return (
-          <Contact
-            key={contact.name}
-            {...contact}
-            id={index}
-            setContacts={setContacts}
-          />
+          <Contact key={contact.id} {...contact} setContacts={setContacts} />
         );
       })}
     </ol>

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;
       });
     }

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;
     });
   };