Need help understanding props in Travel Journal exercise

React
1

I got stuck on the Travel Journal exercise; I had what I thought were aall the necessary props, but I would get the following error:

TypeError: Cannot read properties of undefined (reading ‘src’). I found that adding the prop img={entry.img} to my code (highlighted in the attached screenshot), it worked. If I comment it out, I get the TypeError.

I am not sure why that prop is necessary. Any insight would be appreciated.

image
image463×421 7.44 KB

2

Hey @Dirkster, could you please share what’s in your “Entry” file too?

3

@roku sure - here it is. Where I am getting confused is that in App.jsx, for the src & alt props, I think I am passing the correct info for the props (an img object inside the entry object).

In watching further, the solution Bob provides only has img={entry.img} in App.jsx rather than what I have (passing separate props for src & alt). I am not sure why that works. I thought that how the props are defined in the App component should match how they are in the Entry component.

image
image868×672 13.8 KB

4

Hey @Dirkster, sorry for the late reply here.

Thanks for the code snippet. I think the issue you’re running into comes down to how props are passed and then how they are accessed inside the component.

In your App.jsx, you were doing this initially:

<Entry
  src={entry.img.src}
  alt={entry.img.alt}
  ...
/>

But inside Entry.jsx, you’re trying to access:
<img src={entry.img.src} alt={entry.img.alt} />

Seems like you’re passing src and alt directly, but inside Entry.jsx you’re assuming entry.img is an object. That object never exists unless you explicitly pass it in.

As you said, the way Bob does is to pass img as an object <Entry img={entry.img} />

Then access it as:
<img src={entry.img.src} alt={entry.img.alt} />

You can also do it this way:
<Entry src={entry.img.src} alt={entry.img.alt} />

And in Entry.jsx, access them directly:
<img src={entry.src} alt={entry.alt} />

Downside is that you can’t access entry.img anymore since you’re not passing it.

Your props must match how you access them:

  • If you’re accessing entry.img.src, you must pass img={entry.img}.
  • If you’re passing src and alt directly, you must access entry.src, entry.alt.

Haven’t code in React for a bit so bit rusty but I think that’s what’s happening here.