React js Cannot destructure property as it is undefined

Question

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.

function App() {
  const namelist = [
    { id: "1", name: "sdsakas1", email: "[email protected]" },
    { id: "2", name: "sdsakas2", email: "[email protected]" },
    { id: "2", name: "sdsakas3", email: "[email protected]" },
  ];

  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: "[email protected]" },
    { id: "2", name: "sdsakas2", email: "[email protected]" },
    { id: "2", name: "sdsakas3", email: "[email protected]" },
  ];

  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>

This is working for me. Added a minimal snippet of your code. — pilchard
– pilchard, Commented Aug 31, 2021 at 9:42
To do what @rustyBucketBay says you will need to spread the contact object. <ContactCard {...contact} /> — evolutionxbox
– evolutionxbox, Commented Aug 31, 2021 at 9:42

Jane · Accepted Answer · 2021-08-31 09:51:21Z

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.
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: "[email protected]" },
    { id: "2", name: "sdsakas2", email: "[email protected]" },
    { id: "2", name: "sdsakas3", email: "[email protected]" },
  ];

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

answered Aug 31, 2021 at 9:51

Jane

3341 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

eeskyy Over a year ago

Yep those are the same. Sorry for the spelling mistake. The thing is, it works just fine without that component and I feel that this ContactCard component is extra. But I am new to this and was learning about destructure, copied exactly what the youtuber did and still ended up with an error.

Jane Over a year ago

you already use this component in ContactList component in 6th line, "return <ContactCard contact={contact} />;" I think maybe you don't need to use this component in App.js?

Jane Over a year ago

In App.js, if you want to use ContactCard component, you should pass one of element in namelist as props to it, for example "<ContactCard contact={namelist[0]} />", so that you can see a ContactCard of id 1.

Collectives™ on Stack Overflow

React js Cannot destructure property as it is undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related