0

In my react application, i have three component which are called like this.
"APP -> Card -> Avatar". the code seems working. but, when i go to react dev tool tab in browser(components), only App and Card component is available. Avatar component is doesn't show up.

Attaching the details.
App component..

  <Card
      name={"Beyonce"}
      imgURL={"119.jpg"}
      phone={"+123 456 789"}
      email={"b@beyonce.com"}
  />

Card component... 

 <div className="top">
  <h2 className="name">{props.name}</h2>
  <Avatar source={props.imgURL} />
</div> 
<div className="bottom">
  <p className="info">{props.phone}</p>
  <p className="info">{props.email}</p>
</div>

Avatar component ..

function Avatar(props){ 
        return(
        <img className="circle-img" src={props.source} alt="avatar_img" />
       );
}
export default Avatar;

browser screenshoot -> enter image description here

Groot
  • 171
  • 13

1 Answers1

0

I am not sure how come there is no error in the console because I believe this might be due to a JavaScript exception since you are trying to read props.img.imgURL which will throw Uncaught TypeError because it won't be possible to read property imgURL of undefined props.img.

Try modifying Avatar component as follows:

function Avatar(props){ 
  return (
    <img className="circle-img" src={props.source} alt="avatar_img" />
  );
}
export default Avatar;

In other words, you have passed prop source to Avatar from card component however within Avatar, you are trying to read prop img which will be undefined.

Irfanullah Jan
  • 3,336
  • 4
  • 24
  • 34
  • hi, There was issue with the source version. somehow i paste the old code. but, the problem still persisted which got fixed when i reinstalled chrome. Still, i am not sure about what happened. but, it is fixed now. – Groot Jul 30 '22 at 07:29
  • Oh, so you still have the same issue. Maybe try sandboxing your example somewhere online to see if you can still reproduce it. – Irfanullah Jan Jul 30 '22 at 07:31
  • Make sure you are not returning before `` I mean another return statement above. – Irfanullah Jan Jul 30 '22 at 07:37