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

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

nice catch! thanks for that

2 Answers

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.

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.