Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

TypeError: Cannot read property 'map' of undefined

When I enter the code as he says on the video I get the error message described in the title...

In GuestList.js const GuestList = (props) => <ul> {props.guests.map((guest, index) => <li className="responded"> <span>Iver</span> <label> <input type="checkbox" checked /> Confirmed </label> <button>edit</button> <button>remove</button> </li> )} </ul>

GuestList.propTypes = { guests: PropTypes.array.isRequired }

In App.js => <GuestList guests={this.state.guests} />

However, if I change the propTypes to say guest it works...

In GuestList.js const GuestList = (props) => <ul> {props.guests.map((guest, index) => <li className="responded"> <span>Iver</span> <label> <input type="checkbox" checked /> Confirmed </label> <button>edit</button> <button>remove</button> </li> )} </ul>

GuestList.propTypes = { guests: PropTypes.array.isRequired }

In App.js => <GuestList guests={this.state.guests} />

Can someone tell me why this is happening, and why the code from the video doesn't work?

2 Answers

This is for the 'Building the GuestList' video on the React course

Ignore me I've figured it out