Challenge Project: Flashcards. Stuck on step 9

I’ve got up to step 9 but none of the topics I create are rendering onto screen. My code seems to be fine and the state is updating. Any ideas?

topicsSlice.js:

import { createSlice } from '@reduxjs/toolkit'; const topicsSlice = createSlice({ name: 'topics', initialState: { topics: {} }, reducers: { addTopic: (state, action) => { const { id, name, icon } = action.payload state.topics[id] = { id: id, name: name, icon: icon, quizIds: [] } } } }); export const selectTopic = state => state.topics.topics; export const { addTopic } = topicsSlice.actions; export default topicsSlice.reducer;

topic.js:

import { useSelector } from 'react-redux'; import { Link, useParams } from "react-router-dom"; import ROUTES from "../../app/routes"; import { selectTopic } from "./topicsSlice"; export default function Topic() { const topics = useSelector(selectTopic); // replace this with a call to your selector to select all the topics in state const quizzes = {}; // replace this with a call to your selector to select all the quizzes in state let { topicId } = useParams(); const topic = topics[topicId]; const quizzesForTopic = topic.quizIds.map((quizId) => quizzes[quizId]); return ( <section> <img src={topic.icon} alt="" className="topic-icon" /> <h1>Topic: {topic.name}</h1> <ul className="quizzes-list"> {quizzesForTopic.map((quiz) => ( <li className="quiz" key={quiz.id}> <Link to={ROUTES.quizRoute(quiz.id)}>{quiz.name}</Link> </li> ))} </ul> <Link to="/quizzes/new" className="button center"> Create a New Quiz </Link> </section> ); }

NewTopicForm.js:

import React, { useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { useHistory } from "react-router-dom"; import { v4 as uuidv4, v4 } from "uuid"; import ROUTES from "../app/routes"; import { ALL_ICONS } from "../data/icons"; import { addTopic } from "../features/topics/topicsSlice"; export default function NewTopicForm() { const [name, setName] = useState(""); const [icon, setIcon] = useState(""); const history = useHistory(); const dispatch = useDispatch() const handleSubmit = (e) => { e.preventDefault(); if (name.length === 0) { return; } // dispatch your add topic action here dispatch(addTopic({ id: uuidv4(), name: name, icon: icon})) 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> ); }

store.js:

import { configureStore } from "@reduxjs/toolkit"; import topicsReducer from '../features/topics/topicsSlice'; export default configureStore({ reducer: { topics: topicsReducer }, });

Figured this out very shortly after, I forgot to add a selector to Topics.js. Will make sure to read it properly next time lol