Is it only me that have no id what he is talking about? xD

I 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.

How it’s all connected. I guess I Will take this course twice.

Yeah 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.

The 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>
  )}

I 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!

I 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.

I thought the same thing. Two reasons came to mind,

1. 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.

2. 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.