Mediante map recorro un array de objetos y los envio a un componente hijos pero uno por uno los valores del objeto. Quisiera enviar todo el objeto pero no pude encontrar la manera de que typescript me lo permita. Tengo este componente padre que tiene un state contacts que tiene un array de objetos:
function Contacts() {
const [contacts, setContacts] = useState<ContactsState['contacts']>([]);
useEffect(() => {
setContacts(INITIAL_STATE);
}, []);
return (
<div>
{contacts.map(contact => (
<Contact
key={contact.id}
name={contact.name}
email={contact.email}
phone={contact.phone}
/>
))}
</div>
);
}
export default Contacts;
Pero quiero enviar directamente el objeto completo:
<Contact
key={contact.id}
contact={contact}
/>
Y que lo tome el componente hijo:
interface ContactProps {
id?: number;
name: string;
email: string;
phone: string;
}
function Contact(props: ContactProps) {
const { name, email, phone } = props;
return (
<div className="card card-body mb-3">
<h4>{name}</h4>
<ul className="list-group">
<li className="list-group-item">Email: {email}</li>
<li className="list-group-item">Phone: {phone}</li>
</ul>
</div>
);
}
export default Contact;