Showing data in react table

Question

I have wrote this block of code to fetch data from backend and show it in table in react. But it is showing me error.

I don't know whether I am using map function right or wrong but this is what I have learned and implemented in it.

This is my code.

const [comm, setcomm] = useState({
        addcomment: "",
        commdate: "",
        commid: "",
        commtime: "",
    })

    useEffect(() => {
        loadcomment(id);
    }, []);

    const loadcomment = async (id) => {
        const getcomment = await axios.get(`http://localhost:4000/getcomment/${id}`);
        setcomm(getcomment.data)
        console.log(getcomment.data);
    }

    <div className="showcomment">
                        <Table>
                            <TableHead>
                                <TableRow className="tablehead">
                                    <TableCell>Comments</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody>
                                {
                                    comm.map((com) => (
                                        <TableRow>
                                            <TableCell>
                                                {com.commdate}
                                                {com.addcomment}
                                            </TableCell>
                                        </TableRow>
                                    ))
                                }
                            </TableBody>
                        </Table>
                    </div>

This is my error shown in this. Please help me to resolve it. It is showing that map is not a function. I have got this problem earlier but later on it worked but this time it is not working. please solve this for me

TypeError: comm.map is not a function
UpdatePage
E:/web_development/Intern project/client/src/pages/UpdatePage/UpdatePage.jsx:266
  263 |         <TableCell>Comments</TableCell>
  264 |     </TableRow>
  265 | </TableHead>
> 266 | <TableBody>
      | ^  267 |     {
  268 |         comm.map((com) => (
  269 |             <TableRow>
View compiled

Answer 1

The first time you are rendering it I am assuming that it will use this { addcomment: "", commdate: "", commid: "", commtime: "", } for its value, which is actually not an array :P, I would suggest to console log the comm before using it inside the table, and show the table, or the table body, with conditional rendering

Answer 2

You can't map (iterate) over comm since it's an object and not an array.

const [comm, setcomm] = useState({ // see, here you have an object which is not mapable
        addcomment: "",
        commdate: "",
        commid: "",
        commtime: "",
    })

Even though your request may override this with an array, for a split second you try to map this object.