React js Cannot destructure property as it is undefined

Quite new to React and I’m stuck in Cannot destructure property id of props.contact as it is undefined. I can’t find what’s wrong as props is already sent too.

The error

function App() {
  const namelist = [
    { id: "1", name: "sdsakas1", email: "wawesda1@gmail.com" },
    { id: "2", name: "sdsakas2", email: "wawesda2@gmail.com" },
    { id: "2", name: "sdsakas3", email: "wawesda3@gmail.com" },
  ];

  return (
    <div className="App">
      <Header />
      <AddContact />
      <ContactList names={namelist} />
      <ContactCard />
    </div>
  );
}
import React from "react";
import ContactCard from "./ContactCard";

const ContactList = (props) => {
  const renderContact = props.names.map((contact) => {
    return <ContactCard contact={contact} />;
  });

  return <div>{renderContact}</div>;
};
export default ContactList;
import React from "react";
import user from "../images/user.png";

const ContactCard = (props) => {
  const { id, name, email } = props.contact;
  return (
    <div className="contactlist-div">
      <hr />
      <div className="imgdiv">
        <img src={user} alt="" className="img1" />
      </div>
      <div className="list-div">
        <h3 className="h3">
          <span>
            {id}. {name}
          </span>
        </h3>
        <h4 className="h4">{email}</h4>
        <button className="btn-dlt">delete</button>
      </div>
    </div>
  );
};

export default ContactCard;

function App() {
  const namelist = [
    { id: "1", name: "sdsakas1", email: "wawesda1@gmail.com" },
    { id: "2", name: "sdsakas2", email: "wawesda2@gmail.com" },
    { id: "2", name: "sdsakas3", email: "wawesda3@gmail.com" },
  ];

  return (
    <div className="App">
      <ContactList names={namelist} />
    </div>
  );
}

const ContactList = (props) => {
  const renderContact = props.names.map((contact) => {
    return <ContactCard contact={contact} />;
  });

  return <div>{renderContact}</div>;
};

const ContactCard = (props) => {
  const { id, name, email } = props.contact;
  return (
    <div className="contactlist-div">
      <hr />
      <div className="list-div">
        <h3 className="h3">
          <span>
            {id}. {name}
          </span>
        </h3>
        <h4 className="h4">{email}</h4>
        <button className="btn-dlt">delete</button>
      </div>
    </div>
  );
};


ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer

  1. In your App.js, do you need “CardContact” component? Is it same as “ContactCard”? If “CardContact” means “ContactCard” component, you already use it inside ContactList component.
  2. If “CardContact” means “ContactCard” component and you still want to use it in App.js, you need to pass props “contact” into this component.
function App() {
  const namelist = [
    { id: "1", name: "sdsakas1", email: "wawesda1@gmail.com" },
    { id: "2", name: "sdsakas2", email: "wawesda2@gmail.com" },
    { id: "2", name: "sdsakas3", email: "wawesda3@gmail.com" },
  ];

  return (
    <div className="App">
      <Header />
      <AddContact />
      <ContactList names={namelist} />
      {/*****  Do you need this CardContact? *****/}
      <CardContact />
    </div>
  );
}