Reactjs – axios post request not working in my react component

I have read your code and I found some issues. You can improve it by some steps:

1- Defined an async function fetchComments inside useEffect and called it immediately.

2- Used currentUser passed as a prop to set the username in commentToSend.

3- When a new comment is posted, it prepends the new comment to the existing comments.

It would be better to use ES6, for example arrow function.
Here’s the correct code

import React, { useState, useEffect } from "react";
import CommentList from "./CommentList";
import fetchApi from "./fetchApi";

function CommentAdder({ article_id, currentUser }) {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState("");

  useEffect(() => {
    const fetchComments = async () => {
      try {
        const res = await fetchApi().get(`/api/articles/${article_id}/comments`);
        setComments(res.data.comments);
      } catch (error) {
        console.error(error);
      }
    };

    fetchComments();
  }, [article_id]);

  const postComment = async (newCommentData) => {
    try {
      const res = await fetchApi().post(`/api/articles/${article_id}/comments`, newCommentData);
      setComments([res.data, ...comments]);
    } catch (error) {
      console.error(error);
    }
  };

  const handleOnSubmit = async (e) => {
    e.preventDefault();
    const commentToSend = {
      username: currentUser,
      body: newComment,
    };
    await postComment(commentToSend);
  };

  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <textarea value={newComment} onChange={(e) => setNewComment(e.target.value)} />
        <button type="submit">Add Comment</button>
      </form>
      <CommentList comments={comments} />
    </div>
  );
}

export default CommentAdder;

If I were you, I would have used Redux-toolkit also to presist data or some other tools like react-query to cache request for better performance.

Try to use the console log to see the EndPoint URL

const postComment = async (newCommentData) => {
  try {
    console.log(`Posting to /api/articles/${article_id}/comments with data:`, newCommentData);
    const res = await fetchApi().post(`/api/articles/${article_id}/comments`, newCommentData);
    setComments([res.data, ...comments]);
  } catch (error) {
    console.error('Error posting comment:', error);
  }
};