I used the map function in react, but it doesn't show up in the view-CodePudding

I checked that data is passed to the console, but it does not appear in the table of the view. list && list.length > 0 ? list.map((e) => I think the code in this part is the cause, but when I change it, many errors occur and I can't touch it. Please Help. .

    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([{
            inputData: {
                    post_id: '',
                    title: '',
                    writer: ''
            },
        }]);
    
        useEffect(() => {
            axios.get('http://localhost:5000/post/community').then((res) => {
                console.log("성공");
                console.log(res.data);
                setList(res.data);
            })
        }, [])
    
        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' }} align="right">Writer</TableCell>
                            </TableRow>
                        </TableHead>
                        {list && list.length > 0 ? list.map((e) => {
                            <TableBody>
                                <TableRow key={e.post_id}>
                                    <TableCell component="th" scope="row">{e.post_id}</TableCell>
                                    <TableCell align="right">{e.title}</TableCell>
                                    <TableCell align="right">{e.writer}</TableCell>
                                </TableRow>
                            </TableBody>
                        }) : ""}
                    </Table>
                </TableContainer>
            </div>
        );
    
    }

CodePudding user response：

you're not returning anything inside the map function. Putting a "return" before "TableBody" should fix the issue

CodePudding user response：

You are not returning anything from the map, You don't have to repeat table-body.

Solution 1:

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

Solution 2:

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