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

Posted by Sean Paulson
Sean Paulson
6,668 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
6,668 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! :)

Peter Vann
Peter Vann
36,425 Points
Peter Vann
Peter Vann
36,425 Points

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!