Hey there, I could use a hand. I'm fairly new to React and attempting to develop an application for managing contacts by adding them to Local Storage and deleting them. Below is the code snippet from my App.js file:
import React, {useState, useEffect} from 'react'
import {uuid} from 'uuidv4'
import AddContact from './AddContact'
import ContactList from './ContactList'
import Header from './Header'
function App() {
// Utilizing useState Hooks in React
const LOCAL_STORAGE_KEY = 'contacts'
const [contacts, setContacts] = useState([])
const addContactHandler = (contact) => {
console.log(contacts)
setContacts([...contacts, {id: uuid(), ...contact}])
}
const removeContactHandler = (id) => {
const newContactList = contacts.filter((contact) => {
return contact.id !== id
})
setContacts(newContactList)
}
useEffect(() => {
const retrieve_contact = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
if (retrieve_contact) {
setContacts(retrieve_contact)
}
}, [])
useEffect(() => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts))
}, [contacts])
return (
<div className="ui container">
<Header />
<AddContact addContactHandler={addContactHandler} />
<ContactList contacts={contacts} getContactId={removeContactHandler} />
</div>
)
}
export default App
I encountered an error Uncaught RangeError: Maximum call stack size exceeded.
Any guidance on resolving this issue would be greatly appreciated. Thank you!