Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jimmy Wu
seal-mask
.a{fill-rule:evenodd;}techdegree
Jimmy Wu
Front End Web Development Techdegree Student 10,816 Points
Posted by Jimmy Wu
.a{fill-rule:evenodd;}techdegree
Jimmy Wu
Front End Web Development Techdegree Student 10,816 Points

{guest.name}?

In this video by Guil in the React by Example Course : https://teamtreehouse.com/library/building-the-guestlist-component Why aren't we using {props.guests.name} but {guest.name}? Don't we have to use props to access the data that is passed from <GuestList guests={this.state.guests}>? We are using props.guests.map() to loop through the data so that's why I don't get this part.

1 Answer

Seth Kroger
Seth Kroger
56,413 Points
Seth Kroger
Seth Kroger
56,413 Points

It is because you're using map() on prop.guests that you use guest.name instead of props.guests.name. props.guests is an array of guests so you can't access the name property from it. You have to lookup each element in turn (like props.guests[0].name) or use an array function like map() which runs a function on each individual element. guest is used because that's the parameters name in the function you supply to map().

{props.guests.map((guest, index) => 
    <Guest 
      key={index} 
      name={guest.name}  ... />
)}