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

Remove player and add player no longer work

I have followed the tutorial here completely (as far as I can tell).

The player details are showing when I click on a player, but I can no longer delete or add a player.

I just checked: when I try adding or removing players through the redux dev tools in Chrome, the actions get logged, but the screen doesn't change.

I tried what happens in the dev tools when I click on the x: it SELECTS the player I want to delete, instead of deleting it.

Nothing happens when I click on the 'add player' button.

I'm not sure where else to look.

Ari Misha
Ari Misha
19,274 Points

Hiya there! Can you post your code for us to analyze or something? (:

4 Answers

Hi,

Check the brackets for your reducers. I noticed a few things that looked off there where the brackets dont seem to close out their respective statements (ie ADD_PLAYER is missing the ending bracket). There were no compile errors? I matched your beginning and ending brackets and couldnt get the program to compile. Let me know if this fixes the issue, if not we can proceed further and trace where there are other issues with these functions.

Chris Martinez
Chris Martinez
11,715 Points

You are closing your curly braces before you use the variable in your return statement. Each set of curly braces after the case statement is a separate scope and your variables are not accessible outside of it. I did not download your code, but I am fairly sure this is what is happening.

As a side note, check out this article. Using curly braces in complex switch statements like we use in reducers seems to be a good practice. https://medium.com/@e_himmelfarb/use-curly-braces-with-es6-let-and-const-in-switch-blocks-react-redux-reducers-c0b01b37d748

I think I understand what you mean and have changed my reducerfile accordingly. However, when I do yarn start, the whole thing does not get beyond compiling webpack (which, yes - it did do before).

Here is my reducer:

export default function Player(state = initialState, action) {
    let date = new Date();
    let day = date.getDate();
    let month = date.getMonth() + 1;
    let year = date.getFullYear();

    switch (action.type) {
        case PlayerActionTypes.ADD_PLAYER: {
            const addPlayerList = [
                ...state.players,
                {
                    name: action.name,
                    score: 0,
                    created: `${month}/${day}/${year}`
                }
            ];

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

            return { ...state, players: removePlayerList };
        }
        case PlayerActionTypes.UPDATE_PLAYER_SCORE: {
            const updatePlayerList = state.players.map((player, index) => {
                if (index === action.index) {
                    return {
                        ...player,
                        score: player.score + action.score,
                        updated: `${month}/${day}/${year}`
                    };
                }
                return player;
            });
            return {
                ...state,
                players: updatePlayerList
            };
        }

        case PlayerActionTypes.SELECT_PLAYER:
            return { ...state, selectedPlayerIndex: action.index };

        default:
            return state;
    }
}