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 React by Example Building the Application Pending Name Submission Feature

Sean Paulson
Sean Paulson
5,410 Points

why pass pendingGuest to GuestList when we already passed guests object.

We have a state called guests in App and pass it to GuestList. Gill also adds guests.pendingGuest as its own prop to GuestList.

Is it necessary to pass pendingGuest when we already passed the guests object that contains pendingGuest? Then when we need to reference pendingGuest in child a component we could just use this.props.guests.pendingGuests vs this.props.pendingGuests.

2 Answers

Sean Paulson
Sean Paulson
5,410 Points

Edit { OK I am an idiot lol. I was checking guests.pendingGuests and not guests.pendingUser... I need to work on naming my variables so I dont forget what is what. So yes you do not have to pass pendingUser={guests.pendingUser} if you are already passing the entire guests state and not the guests array. (Even though I would Imagine not passing the ENTIRE state object would be faster if you had a really big state of data.)

Side Note: Also for anyone reading this. I see now that naming my state: "guests" and my array of guests 'guest' does not make much sense. The guests state should be guestsState or something. }

That does help. Also I forgot to mention I am using hooks so mine is set up as

const [guests, setGuests] = useState({
  pendingUser: '',
  isFiltered: false,
  guest: [{...}]
})

sorry about that. Either way you are correct it does not seem to behave in the same way. Very interesting. I will play around with it and see if I can figure out why. Thanks for the help! :)

Hi Sean!

If you look at state (in App.js):

  state = {
    isFiltered: false,
    pendingGuest: '', // Not part of the guests object array below
    guests: [
      {
        name: 'Treasure',
        isConfirmed: false,
        isEditing: false
      },
      {
        name: 'Nic',
        isConfirmed: true,
        isEditing: false
      },
      {
        name: 'Matt K',
        isConfirmed: false,
        isEditing: false
      }
    ]
  }

pandingGuest is NOT part of the guests piece of state.

Also, ran a test/experiment attempting to use props.guests.pendingGuest (which as I stated before, I don't believe actually exists) in the GuestList component, like this:

const GuestList = props =>
    <ul>
      <PendingGuest name={props.guests.pendingGuest} />

It didn't produce an error, but it behaves differently than if you use props.pendingGuest, like this:

const GuestList = props =>
    <ul>
      <PendingGuest name={props.pendingGuest} />

The difference is that when using props.pendingGuest, the new Guest card appears IMMEDIATELY as you start typing.

With props.guests.pendingGuest you don't see the new Guest Card until the user clicks the Submit buttton.

I believe the second case is not the intended/expected behavior and therefore flawed.

It's a better user experience to see the card sooner.

I hope that helps.

Stay safe and happy coding!