Flashcards Projects

Help guys, I am doing the Flashbacks/Quiz Challenge and am stuck on step 8. When I fill out the form for a new topic, it doesn’t render. Here’s the link to the project: https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-redux/modules/wdcp-22-flashcards-05044ce5-0fce-4939-8dcc-77bb678edecf/projects/react-redux-flashcards. and here’s my code:

store.js:
import { configureStore } from “@reduxjs/toolkit”;

// import reducers

import topicsReducer from “…/features/topics/topicsSlice”;

export default configureStore({

reducer: {topicsReducer},

});

Topics.js:
import React from “react”;
import { Link } from “react-router-dom”;
import ROUTES from “…/…/app/routes”;
import { selectTopics } from “…/topicsSlice.js”;
// import selector

export default function Topics() {
const topics = {selectTopics}; // replace this with a call to your selector to select all the topics in state

return (

Topics



    {Object.values(topics).map((topic) => (





  • {topic.name}


    {topic.quizIds.length} Quizzes






  • ))}


Create New Topic


);
}

topicsSlice.js:
import { createSlice } from “@reduxjs/toolkit”;

const initialState = {
topics: {},
};

export const topicsSlice = createSlice({
name: “topicsSlice”,
initialState,
reducers: {
addTopic: (state, action) => {
const { id, name, icon } = action.payload;
state.topics[id] = {
id: id,
name: name,
icon,
quizIds:
},
},
});

export const { addTopic } = topicsSlice.actions;
export const selectTopics = (state) => state.topics.topics;
export default topicsSlice.reducer;

NewTopicForm.js:
import React, { useState } from “react”;
import { useDispatch } from “react-redux”;
import { useNavigate } 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/topicsSlice.js”;
// import addTopic

export default function NewTopicForm() {
const dispatch = useDispatch();
const [name, setName] = useState(“”);
const [icon, setIcon] = useState(“”);
const navigate = useNavigate();

const handleSubmit = (e) => {
e.preventDefault();
if (name.length === 0) {
return;
}
dispatch(addTopic({ name: name, id: uuidv4() }));
// dispatch new topic
navigate(ROUTES.topicsRoute());
};

return (


Create a new topic



<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”
>

Choose an icon

{ALL_ICONS.map(({ name, url }) => (

{name}

))}



Add Topic



);
}