This was very difficult to debug on the Codecademy platform. Had to recreate the project off platform and work out the bugs from there. Here is my solution.
CommentForm.js
import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
createCommentIsPending,
postCommentForArticleId
} from '../features/comments/commentsSlice';
export default function CommentForm({ articleId }) {
const dispatch = useDispatch();
const [comment, setComment] = useState('');show original
CommentList.js
import React from 'react';
import Comment from './Comment';
export default function CommentList({ comments }) {
if (!comments) {
return null;
}
return (
<ul className='comments-list'>show original
Comments.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
loadCommentsForArticleId,
selectComments,
isLoadingComments,
} from '../comments/commentsSlice';
import { selectCurrentArticle } from '../currentArticle/currentArticleSlice';
import CommentList from '../../components/CommentList';
import CommentForm from '../../components/CommentForm';show original
There are more than three files. show original