Redux News Reader

micro2459780598 · June 22, 2023, 7:09pm

gist.github.com

https://gist.github.com/codecademydev/da4944c5740517313698ee3b728cbd46

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("");

This file has been truncated. 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'>

This file has been truncated. 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';

This file has been truncated. show original

There are more than three files. show original

Hello, I have finished every task as best as I know. But I there seems to be a problem with my showing comments and I would like someone’s opinion. Thanks

cssblaster32222 · July 7, 2023, 2:22am

Did you figure this out? Is the problem with adding comments, or with existing comments too?

It looks like you might just need to wrap comments in an object here:

export const postCommentForArticleId = createAsyncThunk(
“comments/postCommentForArticleId”,
async ({ articleId, comment }) => {
const requestBody = JSON.stringfy( comment ); =======> change this to const requestBody = JSON.stringfy( {comment} )
const response = await fetch(api/articles/${articleId}/comments, {
method: “POST”,
body: requestBody,
});
const json = await response.json();
return json;
}

It looks like this is just the format that the API is expecting, it’s in the instructions but I missed it too!

mtrtmk · July 22, 2023, 6:03pm

Just skimmed your code. One issue could be with CommentList.js regarding explicit/implicit returns from an arrow function.

See: Redux News Reader stuck on step 10 - #3 by mtrtmk