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 trialOtto linden
5,857 PointsIs it only me that have no id what he is talking about? xD
I have tried my best to follow along this course but i have little to no idea what you are talking about in this video... :D
8 Answers
Nick Burton
7,387 PointsI was really confused the first time I watched this video. After watching it, I started the whole course over from the beginning. Things really made a lot more sense the second time around. There is definitely a lot to take in here so be sure to take your time and understand all of the concepts leading up to this point. That will surely make this section a lot easier to understand.
The main thing going on here is that Guil is creating a function in the App component so the user can remove a player from the scoreboard. This function will be used from the Player component. Since the Player component is located inside the App component, the function needs to be passed into the Player component (through props) in order for it to be accessible. I hope this helps!
jlampstack
23,932 PointsDon't worry, you will get the hang of it. I was cruising a long until i hit the mark where there is only 12 minutes or 2 videos left and been revisiting this for the past five days. No way this is a 2 hour course LOL.
The video length may be 2 hours but need way more time to let it sink in.
lassek
8,209 PointsI agree with this. It's the second time I take it, and it's a bit more clear now, especially since I take the time to google alternative sources when something is not sufficiently explained.
However, I feel Guil can improve on the pedagogic part. Most of the time where I get imo un-neccessarily stuck is when he introduces complexity that's really not mandatory to communicate what the lesson is about. It's certainly useful in the long run - but not in a React Basic course because it stalls initial learning.
The thing I most appreciate with Teamtreehouse is the short learning sequences, and they shouldn't be made longer by introducing complexity not necessary for the topic at hand.
That said, watching it several times, and also being forced to lookup other sources works towards a deeper understanding which is good. It's just not the way I prefer to learn a basic course - I need to see progress quickly, to gain momentum and a feeling of progress. In-depth knowledge of non-core skills to the topic like javascript magic can wait until the follow-up course. And that's at least what I thought Teamtreehouse was about.
Zack Jackson
30,220 PointsWhich part? I thought this course was well put together and easy to understand. Maybe if you have specific questions we can help you.
Otto linden
5,857 PointsHow itβs all connected. I guess I Will take this course twice.
Michel Ribbens
18,417 PointsI could follow the course all the way along without a problem but got really confused totally at the end of this video when he adds the function to remove the player inside of the click event inside the button. I mean this part:
<button className="remove-player" onClick={ () => props.removePlayer(props.id) }>β</button>
don't understand what is happening in the onClick event. why does this take a new, anoymous function?
hope somebody can explain it to me or give me some feedback where to look for some reference to understand it better
Zack Jackson
30,220 PointsYeah itβs basically saying when this button is clicked run this function.
The function then takes the props and the removePlayer method to remove the player with the id that is passed in with props.id.
Clarke Hyrne
13,088 PointsThe anonymous function is one of a few ways to make sure the scope of "this" is appropriate. Guil mentioned a few in a previous video in this course. For example (from the previous section):
Way 1
incrementScore() {
this.setState( prevState => {
return {
score: prevState.score + 1
}
});
}
render () {
return (
// explicit binding on the component
<button className="counter-action increment" onClick={ this.incrementScore.bind(this) }> + </button>
)}
Way 2 one of many articles on lexical binding of 'this' with arrow functions:
incrementScore() {
this.setState( prevState => {
return {
score: prevState.score + 1
}
});
}
render () {
return (
// lexical binding of 'this' on the component (maybe overkill in this example)
<button className="counter-action increment" onClick={ () => this.incrementScore() }> + </button>
)}
Way 3
//can bind 'this' through lexical binding due to arrow function syntax here
decrementScore = () => {
this.setState({
score: this.state.score - 1
});
}
render () {
return (
// don't need to bind again in render function ?
<button className="counter-action decrement" onClick={this.decrementScore}> - </button>
)}
Elena Medvedeva
9,555 PointsI've tried to experiment a little and now I have some ideas. I'd welcome any corrections. I think that the main difference is that we use removePlayer function outside of the class we created it. We use it in a Player function. And the functions decrement/increment we use in the same Counter class.
If I write 'props.removePlayer.bind(this, props.id)' instead of the callback function everything works correctly. This way we bind 'this' to player
josh r
1,085 PointsThe Key is not used here because Keys serve as a hint to React but they donβt get passed to your components. If you need the same value in your component, you need to pass it explicitly as a prop with a different name. This comes from the React docs here: https://reactjs.org/docs/lists-and-keys.html
Michel Ribbens
18,417 Pointsstill not sure if I totally understand it...
for example, in the Counter component we use the decrement and increment functions inside of the onClick event as well but then by simply using onClick={this.(functionName)}
so why do we have to call another, new function inside of the onClick removePlayer to make it work instead of something like onClick={this.props.removePlayer(props.id)}
?
Nelson Fleig
25,764 PointsI tried implementing the on-click event as onClick={this.props.removePlayer(props.id)}
as Michel Ribbens pointed out and it doesn't work. In a previous lesson, we learn that if you don't call the clickHandler as a callback function, it will automatically execute after the Component is "mounted". This means that none of the players will show up as these are automatically deleted from the array the second the Component appears.
However, I still have my doubts regarding the scoping. How is it that by passing () => props.removePlayer(props.id)
we have access to the state of the parent Component? I'm sure it has something to do with the meaning of "this" when using arrow functions... Can anybody point me to some resources where this is explained? Thanks!
Zack Jackson
30,220 PointsI think that the calling of the arrow function rebinds this so that it can be used. Someone correct me if Iβm wrong here but I think he briefly mentions this.
Othneil Drew
22,421 PointsWhy did he have to add the id on the player component? Couldn't the value of key be used to identify the element that was clicked?
Bader Alsabah
4,738 PointsI thought the same thing. Two reasons came to mind,
Key is being passed down as a string to the Player component and the handleRemovePlayer function is filtering for a numerical value with "!==" , so at its current state - filtering wont work with key.
I think he did it for simplicity - he could have adjusted his comparison operator to "!=" - but perhaps he didn't want key as a variable to be taken out of context for explanation purposes.
Ryan Emslie
Full Stack JavaScript Techdegree Student 14,453 PointsRyan Emslie
Full Stack JavaScript Techdegree Student 14,453 PointsThis was an intimidating course and I had to watch the videos more than once. For me, I have to read along with the actual React documentations as I progress with the videos. When it comes to learning new concepts, I absorb information easier if I can read along. Fortunately, the videos closely follow the React docs https://reactjs.org/docs/components-and-props.html.