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: https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-redux/modules/redux-middleware-and-thunks/projects/redux-news-reader

this is my code from the commentsSlice.js

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

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

export const postCommentForArticleId = createAsyncThunk(
  'comments/postCommentForArticleId',
  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) => {
    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;
        state.byArticleId[action.payload.articleId].push(
          action.payload.comment
        );
      });
  },
});

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

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) => {
    e.preventDefault();
    // dispatch your asynchronous action here!
    dispatch(postCommentForArticleId({ articleId, comment }));
    setComment('');
  };

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

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;

    state.byArticleId[action.payload.articleId].push(

      action.payload

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.