Flashcards - redux error


This is the error message that I am encountering when trying to finish this project.
I am doing this off platform so this is the github repository. GitHub - eeemily13/flashcards: flashcards codecademy project

I have add the two sections of code being high lighted in the errors.

import { createSlice } from "@reduxjs/toolkit"; import { addQuizId } from "../topics/topicsSlice"; export const quizSlice = createSlice({ name: "quizzes", initialState: { quiz: {} }, reducers: { addQuiz: (state, action) => { const { id, name, topicId, cardIds } = action.payload; state.quiz[id] ={ id: id, name: name, topicId: topicId, cardIds: cardIds }; }} }); export const quizSliceThunk = (quiz) => { const { topicId, id } = quiz; return (dispatch) => { dispatch(quizSlice.actions.addQuiz(quiz)) dispatch(addQuizId({ topicId: topicId, quizId: id })) } } export const selectQuiz = (state) => state.quizzes.quizzes; export const { addQuiz } = quizSlice.actions; export default quizSlice.reducer;
import React, { useState } from "react"; import { useHistory } from "react-router-dom"; import { v4 as uuidv4 } from "uuid"; import ROUTES from "../app/routes"; import { addQuizId, selectTopics } from "../features/topics/topicsSlice"; import { useSelector, useDispatch } from "react-redux"; import { quizSliceThunk } from "../features/quizzes/quizSlice"; export default function NewQuizForm() { const [name, setName] = useState(""); const [cards, setCards] = useState([]); const [topicId, setTopicId] = useState(""); const history = useHistory(); const topics = useSelector(selectTopics); const dispatch = useDispatch(); const handleSubmit = (e) => { e.preventDefault(); if (name.length === 0) { return; } const cardIds = []; // create the new cards here and add each card's id to cardIds // create the new quiz here dispatch( quizSliceThunk({ name: name, topicId: topicId, cardIds: cardIds, id: uuidv4(), }) ) history.push(ROUTES.quizzesRoute()); }; const addCardInputs = (e) => { e.preventDefault(); setCards(cards.concat({ front: "", back: "" })); }; const removeCard = (e, index) => { e.preventDefault(); setCards(cards.filter((card, i) => index !== i)); }; const updateCardState = (index, side, value) => { const newCards = cards.slice(); newCards[index][side] = value; setCards(newCards); }; return ( <section> <h1>Create a new quiz</h1> <form onSubmit={handleSubmit}> <input id="quiz-name" value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder="Quiz Title" /> <select id="quiz-topic" onChange={(e) => setTopicId(e.currentTarget.value)} placeholder="Topic" > <option value="">Topic</option> {Object.values(topics).map((topic) => ( <option key={topic.id} value={topic.id}> {topic.name} </option> ))} </select> {cards.map((card, index) => ( <div key={index} className="card-front-back"> <input id={`card-front-${index}`} value={cards[index].front} onChange={(e) => updateCardState(index, "front", e.currentTarget.value) } placeholder="Front" /> <input id={`card-back-${index}`} value={cards[index].back} onChange={(e) => updateCardState(index, "back", e.currentTarget.value) } placeholder="Back" /> <button onClick={(e) => removeCard(e, index)} className="remove-card-button" > Remove Card </button> </div> ))} <div className="actions-container"> <button onClick={addCardInputs}>Add a Card</button> <button>Create Quiz</button> </div> </form> </section> ); }

I had a similar problem before. I added some console.log() statements with “typeof x” where x was each variable in the part causing the error. This helped pinpoint the exact part that was an object when it should have been a function. I still had to figure out why, though. In my case, I destructured an object incorrectly in the props of a function component.

Not sure if that helps at all…

1 Like