0

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;

1 respuesta 1

1

Debes asignar el objeto contact como una prop dentro de la interfaz ContactProps y asignarle sus respectivos datatypes al contact. De esta manera Typescript sabe que recibirá un contact y sus datatypes.

interface ContactProps {
  contact: { 
    id?: number;
    name: string;
    email: string;
    phone: string;
  }
}

Puedes acceder al contact:

function Contact(props: ContactProps) {
  const { contact } = props;

  return (
    <div className="card card-body mb-3">
      <h4>{contact.name}</h4>
      <ul className="list-group">
        <li className="list-group-item">Email: {contact.email}</li>
        <li className="list-group-item">Phone: {contact.phone}</li>
      </ul>
    </div>
  );
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.