React - TypeError: this.props.guests is null

Question

Hi I am having an issue with my React project. It is a pretty simple project designed to allow someone to add their name to a guest array which is in state.

I am getting the error TypeError: this.props.guests is null on this: class GuestArea extends Component { render() { return ( <div id="guest-area"> <h1>Guests</h1>

    {this.props.guests.map((person, index) => (
      <Guest
        firstName={person.firstName}
        lastName={person.lastName}
        key={index + 1}
        id={person.id}
        removeGuest={this.props.removeGuest}
      />
    ))}
  </div>
);

} }

export default GuestArea;

I believe it is because when the app is first loaded the guest array is empty and the program can't map over nothing. The guest array is populated when you submit your name. How would I get around this?

It worked fine in chrome in my dev server however when I tried to run build and then serve it it came up with this error, also when I am on the dev server in firefox it comes up with this error as well.

Here is a link to my repo if that will help https://github.com/martincavaliers/out-of-office

Would appreciate any help as this is the last issues.

Answer 1 · 2019-04-04T07:05:53Z

April 4, 2019 7:05am

Hey there Martin,

I believe that adding simple if else logic as you suspected would do the trick. You could just add a placeholder guest component there or a simple prompt that the guest list is empty.

 {this.props.guests.map((person, index) => {
     if (this.props.guests) {
        return {
          <Guest
            firstName={person.firstName}
            lastName={person.lastName}
            key={index + 1}
            id={person.id}
            removeGuest={this.props.removeGuest}
      />
    )}
  return // whatever you want to return at the beginning, when this.props.guests is empty
  }}
 </div>
);

Hope this helps,

Wiktor Bednarz

Welcome to the Treehouse Community

Looking to learn something new?

Martin Coutts

Martin Coutts

React - TypeError: this.props.guests is null

1 Answer

Wiktor Bednarz

Wiktor Bednarz