React Flashcards Project - TypeError: Cannot read properties of undefined (reading 'quizIds')

Hi, just wondering if anyone could give me a hand. Been stuck on this for a while now and can’t seem to work it out.

I keep getting this error:

TypeError: Cannot read properties of undefined (reading ‘quizIds’)

Location of error:
flashcards-starter/src/features/topics/topicsSlice.js:19

Here’s my code

import { createSlice } from '@reduxjs/toolkit';

const topicsSlice = createSlice({
    name: 'topics',
    initialState: {
        topics: {}
    },
    reducers: {
        addTopic: (state, action) => {
            const newTopic = {
                id: action.payload.id,
                name: action.payload.name,
                icon: action.payload.icon,
                quizIds: []
            }
            state.topics[action.payload.topicId] = newTopic;
        },
        addQuizId: (state, action) => {
            state.topics[action.payload.topicId].quizIds.push(action.payload.id);
        }
    }
});


export const topicsSelector = state => state.topics.topics;

export const { addTopic, addQuizId } = topicsSlice.actions;
export default topicsSlice.reducer;


Thanks in advance :slight_smile:

Without seeing the rest of your code, it is a little hard to say exactly what is happening. However, this error is most likely the result of there not being a object at the state.topics[action.payload.topicId] on line 19. If this is undefined, then there is no ‘quizIds’ property that you can push an item into.

Check to see that you are passing a proper topicId in your payload. Use a console.log(action.payload.topicId); just above the line causing the error to see what is happening. Hope that helps you figure out what is going on.

Heres the source code:

Heres the running app.

Still struggling to work this out haha, been trying it for a good few hours now and still not got anywhere.

The add topics work but not the add quiz which is what I’m stuck at.

Any ideas at all or tips on what I can do better to work it out for myself?

Thanks

You still need to add the quizzesReducer to your store.js file. Also your cardsReducer too if you have implemented it.

Ahh thank you, totally missed that.

However, my quizzesSelector is returning an undefined object so it is just displaying an empty box. Sorry for the amount of things I’m asking, this is my first project on here that I have really struggled with.

That is what the forums should be for! It is hard when getting started to debug and react/redux is definitely challenging.

Not in your quizzesSlice reducer for addQuiz that you are trying to access properties of action, when you should be accessing the payload action.payload.
Line 11

  addQuiz: (state, action) => {
            const {quizId, name, topicId, cardIds} = action;

Hopefully that gets you moving in the right direction. Note that your quiz code should be very similar to your topics code. Comparing the two can help you uncover some of these types of errors.

Ahh thank you so much! I totally missed that.

1 Like