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 Basics Understanding State Remove Items From State

Otto linden
Otto linden
5,857 Points

Is 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

Ryan Emslie
seal-mask
.a{fill-rule:evenodd;}techdegree
Ryan Emslie
Full Stack JavaScript Techdegree Student 14,453 Points

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

8 Answers

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

Don'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.

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.

Zack Jackson
Zack Jackson
30,215 Points

Which 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
Otto linden
5,857 Points

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

Michel Ribbens
Michel Ribbens
18,417 Points

I 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
Zack Jackson
30,215 Points

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.

Clarke Hyrne
Clarke Hyrne
12,712 Points

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>
  )}
Elena Medvedeva
Elena Medvedeva
9,555 Points

I'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
josh r
1,085 Points

The 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
Michel Ribbens
18,417 Points

still 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
Nelson Fleig
18,014 Points

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!

Zack Jackson
Zack Jackson
30,215 Points

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.

Othneil Drew
Othneil Drew
22,421 Points

Why 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
Bader Alsabah
4,737 Points

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.