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 Building Applications with React and Redux Putting it all Together Solution: The Player Detail Component

Dan Avramescu
Dan Avramescu
11,286 Points
Posted by Dan Avramescu
Dan Avramescu
11,286 Points

I think that here is a small application bug

Try removing Alena Holligan, I mean the last player, the console will throw an error. That is because this exact implementation, meaning that remove player call to action (anchor tag) being within the select player div will involve the click event bubbling up the DOM to the parent select player div, so the select Player callback is also called. My workaround is simple Javascript like so:

            <div className="player-name" onClick={()=> select(index)}>
                <a className="remove-player" onClick={(ev)=> {
                    ev.stopPropagation();
                    removePlayer(index);}
                }>✖</a>
Matthew Young
Matthew Young
781 Points
Matthew Young
Matthew Young
781 Points

nice catch! thanks for that

2 Answers

Samuel Furr
Samuel Furr
4,893 Points
Samuel Furr
Samuel Furr
4,893 Points

Make sure you're passing the selected player in right to the PlayerDetail component, I had a typo where it wasn't detecting if it was being passed a null instead of a player and I ran into the same problem, and I almost did a similar thing until I checked my code again.

robertduebelbeis
robertduebelbeis
3,990 Points
robertduebelbeis
robertduebelbeis
3,990 Points

I think there might be a bug in the switch case inside the player.js Reducer. The case for the "REMOVE_PLAYER" action type is as follows:

case PlayerActionTypes.REMOVE_PLAYER:
            const removePlayerList = [
                ...state.players.slice(0, action.index),
                ...state.players.slice(action.index + 1)
            ];
            return {
                ...state,
                players: removePlayerList
            };

I think this is because we're now explicitly slicing the players array in the state, now thaat "selectedPlayerIndex" has been added. But I'm new here and I could be wrong.