Redux Flashcards Project Step 14

Hello all!

I am struggling with step 14 of the Redux Flashcards project. No matter what I do I keep getting an error

I have done everything I can think of, even looking at other code, and just can’t seem to figure out what I’m doing wrong. Any help would be greatly appreciated! My Code is below

TopicSlice.js

import { createSlice } from "@reduxjs/toolkit"; export const topicsSlice = createSlice({ name: "topics", initialState: { topics: {} }, reducers: { addTopic: (state, action) => { const { topicId, name, icon } = action.payload; state.topics[topicId] = { id: topicId, name: name, icon, quizIds: [] }; }, addQuizIdForTopic: (state, action) => { console.log(action.payload) const { topicId, quizId } = action.payload; state.topics[topicId].quizIds.push(quizId); } } }); export const { addTopic, addQuizIdForTopic } = topicsSlice.actions; export const selectTopics = (state) => state.topics.topics; export default topicsSlice.reducer;

quizSlice.js

import { createSlice } from "@reduxjs/toolkit"; import { addQuizIdForTopic } from "../topics/TopicSlice"; export const quizzesSlice = createSlice({ name: "quizzes", initialState: { quizzes: {} }, reducers: { addQuiz: (state, action) => { const { id } = action.payload; state.quizzes[id] = action.payload; } } }); export const addQuizForTopicId = (quiz) => { const { topicId, quizId } = quiz; return (dispatch) => { dispatch(quizzesSlice.actions.addQuiz(quiz)); dispatch(addQuizIdForTopic({ topicId, quizId })); }; }; export const selectQuizzes = (state) => state.quizzes.quizzes; export const { addQuiz } = quizzesSlice.actions; export default quizzesSlice.reducer;

NewQuizForm.js

import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useHistory } from "react-router-dom"; import { addQuizForTopicId } from "../features/quizzes/quizSlice"; import { selectTopics } from "../features/topics/TopicSlice"; import { v4 as uuidv4 } from "uuid"; import ROUTES from "../app/routes"; 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 = []; let quizId = uuidv4(); const quizObj = { quizId, name, topicId, cardIds } console.log(quizObj) dispatch(addQuizForTopicId(quizObj)); 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> ); }

NewTopicForm.js

import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { useHistory } from "react-router-dom"; import { v4 as uuidv4 } from "uuid"; import ROUTES from "../app/routes"; import { ALL_ICONS } from "../data/icons"; import { addTopic } from "../features/topics/TopicSlice"; export default function NewTopicForm() { const dispatch = useDispatch() const [name, setName] = useState(""); const [icon, setIcon] = useState(""); const history = useHistory(); const handleSubmit = (e) => { e.preventDefault(); if (name.length === 0) { return; } dispatch(addTopic({ name: name, id: uuidv4(), icon})) // dispatch your add topic action here history.push(ROUTES.topicsRoute()); }; return ( <section> <form onSubmit={handleSubmit}> <h1 className="center">Create a new topic</h1> <div className="form-section"> <input id="topic-name" type="text" value={name} onChange={(e) => setName(e.currentTarget.value)} placeholder="Topic Name" /> <select onChange={(e) => setIcon(e.currentTarget.value)} required defaultValue="default" > <option value="default" disabled hidden> Choose an icon </option> {ALL_ICONS.map(({ name, url }) => ( <option key={url} value={url}> {name} </option> ))} </select> </div> <button className="center">Add Topic</button> </form> </section> ); }

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.