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 Components (2018) Managing State and Data Flow Update State Based on a Player's Index

Brandyn Lordi
Brandyn Lordi
17,778 Points

Why change player score using new index variable instead of the key which is already defined in players array?

Guil pass index to the player component, but the player component already has a unique prop named key- Is there a reason this value isn't passed to the function?

Matthew Cushing
Matthew Cushing
12,048 Points

I assume that he isn't using key because it is a string. However, Player is also passed a prop named id. The only reason I can see him not using the prop 'id' is because he was trying to show you the whole process of passing a prop through the chain and back up the chain without sidetracking on a previously used prop. Only other reason would be just overlooking it to be honest.

5 Answers

Stephen O'Sullivan
Stephen O'Sullivan
2,666 Points

I did not understand that either, I would have just used the id since we are already passing it to the player component. I think this makes for cleaner code since we can do the same thing shown in the video with one less prop.

If you would also like to stop the numbers from being negative, you can do a quick check. if(this.state.players[index].score === 0 && Math.sign(delta) === -1){ return null }

What this is doing is getting the players' score and checking whether or not it is equal to Zero. If it is equivalent to zero, is it being added or subtracted to. If it's being added to the rest of the function will go on; if not, it will returning nothing. The reason I used Math.sign is that, if we decide later we want to add or subtract by 5, it will still work.

HI, I am thinking it has to do with the fact that one of the distinguishing features of an array is that it is accessible by it's index...starting from 0. Your array is an array of objects and you are trying to access the index of objects within the array. By returning the index associated with that prop, you are targeting the score field in the player object at index X. For example, you click the third row (index 2 as it relates to the array).

The player Id's start at 1 while an array's index start at 0. if you where to use the id you would be changing one player below.

Suyang Wang
Suyang Wang
2,286 Points

Index starts from 0 But the player's id starts from 1. If we use the player id to identify the player, when we need to change the score for player at players[id - 1]

Anuj Kalbalia
Anuj Kalbalia
3,183 Points

Id or key cannot be used. Let me try to explain with an example.

We have initially got 4 players with id's 1-4, and now with the introduction of the new variable index, index 0-3.

When say the player with id=3 gets deleted, we now have got 3 players, id=1, id=2, id=4. But the index values will be index=0, index=1, index=2. And now if you want to access the last player out of the remaining ones, it should be players[2] and not players[4].

What we need here is an index for the players array to access the array elements. The id or the key is a mere hardcoded number with each of the player objects, which may not necessarily denote the index of the players array, particularly when we have a delete player feature. The index must automatically realign itself on every change of state, and the new index variable exactly does that.