Después de agregar key={contact.id} al componente ContactList, los contactos (nombre, correo electrónico e ícono de papelera) no están visibles al hacer clic en el botón Agregar. La identificación (generada por uuid) se pasa de ContactCard a ContactList y luego a App.js. Soy nuevo en reaccionar y sus conceptos. Puede haber un pequeño error, pero no soy capaz de resolverlo.
Estos componentes van a ser revisados,
Aplicación.js
function App() { const LOCAL_STORAGE_KEY = "contacts"; const [contacts, setContacts] = useState([]); const addContactHandler = (contact) => { setContacts([...contacts, {id: uuid(), ...contact }]); }; const removeContactHandler = (id) => { const newContactList = contacts.filter((contact) => { return contact.id !== id; }); setContacts(newContactList);} useEffect(() => { const retreiveContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)); if(retreiveContacts) setContacts(retreiveContacts); }, []); 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> );}ListaContactos.js
import React from "react"; import ContactCard from "./ContactCard"; const ContactList = (props) => { const deleteContactHandler = (id) => { props.getContactId(id); }; const renderContactList = props.contacts.map((contact) => { return <ContactCard contact = {contact} clickHandler = {deleteContactHandler} key={ contact.id}/> }); return ( <div className="ui celled list"> {renderContactList} </div> );};ContactCard.js
const ContactCard = (props) => { const {id, name, email} = props.contact; return ( <div className="item "> <img className="ui avatar image" src={user} alt="user" /> <div className="content"> <div className="header">{name}</div> <div>{email}</div> </div> <i className="trash alternate outline icon" style={{color: "red", marginTop: "10px "}} onClick={() => props.clickHandler(id)}></i> </div> );};(Actualizado)
El problema fue la import {uuid} from 'uuidv4'; . La forma correcta de importar esto es haciendo:
import React, {useState, useEffect} from 'react'; import './App.css'; import Header from './Header'; import AddContact from './AddContact'; import ContactList from './ContactList'; import { v4 as uuidv4 } from 'uuid';Y setContacts en App.js debe ser así:
setContacts([...contacts, {id: uuidv4(), ...contact }]);Probé aquí y funciona!
Consejo adicional:
Noté que su componente AddContact podría cambiarse para ser un mejor componente de clase. Mira algunos cambios que podrías hacer:
constructor(props) { super(props); this.state = { name: "", email: "" }; this.add = this.add.bind(this); } add = (e) => { e.preventDefault(); if(this.state.name === "" || this.state.email === ""){ alert("All fields are mandatory"); return; } this.props.addContactHandler(this.state); //clearing name and email this.setState({name: "", email: ""}); };Usar constructor es una mejor manera de usar accesorios en su componente de clase y vincular sus funciones para usar " this.add " por ejemplo.