I am using reactJS, AntD Table for framework, but I can't make the data shown in the table

Question

I am using reactJS and antd for framework, trying to make the table with my data saved in the server. I put the below code and the result is not good at all. Please, support me.

import React, { useEffect, useState } from 'react'
import { FaCode } from "react-icons/fa";
import axios from "axios";
import { Card, Button, Col, Row, Table } from 'antd';
import { SketchOutlined } from '@ant-design/icons';




function LandingPage() {
    
    const [Products, setProducts] = useState ([]);
    
    
    useEffect(()=> {
        
        axios.post('/api/product/products')
            .then(response => {
                if (response.data.success) {
                    
                    setProducts(response.data.productInfo)
                } else {
                    alert("상품을 가져오는데 실패하였습니다.")
                }
        })
        
    }, [])
    

            
            
            const data = Products.map ((product, index) => (
                [{
                    item: product.item,
                    grade: product.grade,
                    price: product.price,
                    box: product.box,
                    key: 'index'
                }] 
            ))
        
        
            const columns = [
                {
                    title: '품명',
                    dataIndex: 'item',
                    key:'key',
                    render: item =>{
                    return <a>{item}</a>
                    }
                },
                {
                    title: '등급',
                    dataIndex: 'grade',
                    key:'key'
                },
                {
                    title: '수량',
                    dataIndex: 'box',
                    key:'key'
                },
                {
                    title: '가격(원)',
                    dataIndex: 'price',
                    key:'key'
                }
            ]
        
        
        console.log('products', Products)
    
    
    return (
        <div style={{ width: '75%', margin: '3rem auto' }}>
            
            <div style={{ textAlign: 'center' }}>
                <h2> 재고자료 <SketchOutlined /></h2>
                <h3>재고 LIST</h3>
            </div>
            
            {/* Filter */}
            
            {/* Search */}
            
            
            {/* Table */}
            
        
            <Table
                columns={columns}
                dataSource={data}
                />

            
            <br />
            <br />
            <div style={{ display: 'flex', justifyContent: 'center' }}>
            
                <Button type="primary">See More</Button>
            </div>
            
        </div>
    )
}

export default LandingPage

enter image description here

I have upload page and I uploaded 5 items into the table, but there is no data shown. only 5 rows... How can I solve this problem?

Thank you.

Answer 1

Try to remove [] in your map function

const data = Products.map ((product, index) => ({
     item: product.item,
     grade: product.grade,
     price: product.price,
     box: product.box,
     key: 'index'
}))