React usestate array map() is not working

From what I see in the code you are not using the correct Object and you are not returning the value of the map function you should use list as the object which contains data and also use “return” to print the result of the map function so the map code should looks like 

{list.values(list).map((e) => { return ( <TableBody> <TableRow key={e.post_id}> <TableCell component="th" scope="row">{e.post_id}</TableCell> <TableCell component="th" scope="row">{e.title}</TableCell> <TableCell component="th" scope="row">{e.writer}</TableCell> </TableRow> </TableBody> );})}

Or you can use the function of map without the { } to return the value like this (not that after => there are no “{” )

{list.values(list).map((e) => <TableBody> <TableRow key={e.post_id}> <TableCell component="th" scope="row">{e.post_id}</TableCell> <TableCell component="th" scope="row">{e.title}</TableCell> <TableCell component="th" scope="row">{e.writer}</TableCell> </TableRow> </TableBody>})}

also, you can test it using console.log before the component return like 

console.log(list); return ( <div> <Navbar /> .....

so if you want the entire code 

import React, { useEffect, useState } from "react";import axios from 'axios';import Navbar from './Navbar';import Box from '@mui/material/Box';import Button from '@mui/material/Button';import Table from '@mui/material/Table';import TableBody from '@mui/material/TableBody';import TableCell from '@mui/material/TableCell';import TableContainer from '@mui/material/TableContainer';import TableHead from '@mui/material/TableHead';import TableRow from '@mui/material/TableRow';import Paper from '@mui/material/Paper'; export default function Community() { const [list, setList] = useState([]); useEffect(() => { axios.get('//localhost:5000/post/community').then((res) => { setList(res.data); console.log(res.data); console.log(list); }) },[]) console.log(list); return ( <div> <Navbar /> <Box> <Button sx={{ fontWeight: 'bold' }} href="/newpost">게시글 등록</Button> </Box> <TableContainer component={Paper}> <Table aria-label="simple table"> <TableHead> <TableRow> <TableCell sx={{ fontWeight: 'bold' }}>Post_id</TableCell> <TableCell sx={{ fontWeight: 'bold' }}>Title</TableCell> <TableCell sx={{ fontWeight: 'bold' }}>Writer</TableCell> </TableRow> </TableHead> {list.values(list).map((e) => { return ( <TableBody> <TableRow key={e.post_id}> <TableCell component="th" scope="row">{e.post_id}</TableCell> <TableCell component="th" scope="row">{e.title}</TableCell> <TableCell component="th" scope="row">{e.writer}</TableCell> </TableRow> </TableBody> ); })} </Table> </TableContainer> </div> ); }

Good luck