Topic can’t render onto the screen after adding in the form and submitting.
This is my NewTopicForm.js
import React, { useState } from "react";
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/newFile";
import { useDispatch } from "react-redux";
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({name: topics, id: uuidv4(), 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>
);
}
My new file/ topic slice
import { createSlice } from '@reduxjs/toolkit';
const options = {
name: 'topics',
initialState: {
topics: {}
},
reducers: {
addTopic: (state, action) => {
const { id, name, icon } = action.payload;
state.topics[id] = {
id: id,
name: name,
icon: icon,
quizIds: []
}
},
addQuizId: (state, action) => {
const { quizId, topicId } = action.payload;
state.topics[topicId].quizIds.push(quizId);
}
}
};
export const selectTopic = (state) => state.topics.topics;
export const { addTopic, addQuizId } = newFile.actions;
export default newFile.reducer;