Redux News Reader Uncaught TypeError: Cannot read properties of undefined (reading 'type')

Hi everyone, I’m working on the Redux News Reader project and I’m stuck at task 15 of the front-end path.
When I pass in a new comment and hit the submit button I got an error in my browser console saying:
Uncaught TypeError: Cannot read properties of undefined (reading ‘type’)
Could someone help me with solving this error?

I copied all the files and I’m working in VS code. (had a lot of trouble working on Codecademy with this project)
This is the link of the project at Codecademy:

this is my code from the commentsSlice.js

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const loadCommentsForArticleId = createAsyncThunk(
  async (id) => {
    const response = await fetch(`api/articles/${id}/comments`);
    const json = await response.json();
    return json;

export const postCommentForArticleId = createAsyncThunk(
  async ({ articleId, comment }) => {
    const requestBody = JSON.stringify(comment);
    const response = await fetch(`api/articles/${articleId}/comments`, {
      method: 'POST',
      body: requestBody,
    const json = await response.json();
    return json;

// Create postCommentForArticleId here.

export const commentsSlice = createSlice({
  name: 'comments',
  initialState: {
    byArticleId: {},
    isLoadingComments: false,
    failedToLoadComments: false,
    createCommentIsPending: false,
    failedToCreateComment: false,
  extraReducers: (builder) => {
      .addCase(loadCommentsForArticleId.pending, (state) => {
        state.isLoadingComments = true;
        state.failedToLoadComments = false;
      .addCase(loadCommentsForArticleId.rejected, (state) => {
        state.isLoadingComments = false;
        state.failedToLoadComments = true;
      .addCase(loadCommentsForArticleId.fulfilled, (state, action) => {
        state.isLoadingComments = false;
        state.byArticleId[action.payload.articleId] = action.payload.comments;
      .addCase(postCommentForArticleId.pending, (state) => {
        state.createCommentIsPending = true;
        state.failedToCreateComment = false;
      .addCase(postCommentForArticleId.rejected, (state) => {
        state.createCommentIsPending = false;
        state.failedToCreateComment = true;
      .addCase(postCommentForArticleId.fulfilled, (state, action) => {
        state.createCommentIsPending = false;

export const selectComments = (state) => state.comments.byArticleId;
export const isLoadingComments = (state) => state.comments.isLoadingComments;
export const createCommentIsPending = (state) =>

export default commentsSlice.reducer;

this is my code from the Commentform.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { createCommentIsPending } from '../features/comments/commentsSlice';
import postCommentForArticleId from '../features/comments/commentsSlice';

export default function CommentForm({ articleId }) {
  const dispatch = useDispatch();
  const [comment, setComment] = useState('');

  // Declare isCreatePending here.

  const handleSubmit = (e) => {
    // dispatch your asynchronous action here!
    dispatch(postCommentForArticleId({ articleId, comment }));

  return (
    <form onSubmit={handleSubmit}>
      <label for="comment" className="label">
        Add Comment:
      <div id="input-container">
          onChange={(e) => setComment(e.currentTarget.value)}
        <button className="comment-button">Submit</button>

I’m having a similar issue, but I’m getting a "Cannot read properties of undefined (reading ‘id’). I think the issue may be with because the Comment component needs and id from the comment prop, and we don’t add that with the postCommentsForArticleId thunk creator. I think there may be an issue with the fake api the project uses add the id and text properties to the action payload, if that makes sense.

Hello again! I finally figured it out (at least for me.)
The fulfilled case function for postCommentForArticleId should push action.payload, noT action.payload.comment

.addCase(postCommentForArticleId.fulfilled, (state, action) => {

    state.createCommentIsPending = false;

    state.failedToCreateComment = false;



Hi davidmason2050074510, Thank you for your advise. I’ve tried it and sad enough it didn’t work for me. I have tried several things and got also different errors back that I can’t solve. maybe I will try to complete this project later in the course.