Как создать динамическую таблицу c в reactjs - PullRequest
Новая
       47

Как создать динамическую таблицу c в reactjs

0 голосов
/ 11 апреля 2020

Я пытался создать настраиваемую динамическую c таблицу в reactjs с заголовком, но каким-то образом это не удалось с помощью хуков. Я новичок в reactjs

Вот то, что я пытался, но это не удалось: 

import React, { useState } from 'react';

const Servicecharges = () => {

    const [items, setitems] = useState({
        stude: [
            { "Services": "Hire Charges for Langar / Preeti Bhoj", "Charges": "£251", "Comments": "Including use of the Kitchen. Additionally all goods and materials to be supplied or purchased from the Mandir" },
            { "Services": "Preeti Bhoj (Daal, 1 Veg, Dahi, Chawal, Roti, Sweet)", "Charges": "£321", "Comments": "Additional Sabzi (£100)Plus Cleaner (£50)" },
            { "Services": "Pooja / Havan at residences (Inside Glasgow)", "Charges": "£31+", "Comments": "" },
            { "Services": "Pooja / Havan at residences (Outside Glasgow)", "Charges": "£51+", "Comments": "" },
        ]
    })

    const renderTableData = () => {
        return this.items.stude.map((stud, index) => {
            const { Services, Charges, Comments } = stud //destructuring
            return (
                <tr >
                    <td>{Services}</td>
                    <td>{Charges}</td>
                    <td>{Comments}</td>
                </tr>
            )
        })
    }
    return (
        <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
                <tbody>
                    {this.renderTableData()}
                </tbody>
            </table>
        </div>
    );
};

export default Servicecharges;

Использование сервисных сборов. js в вашем приложении. js

render(){
    <Servicecharges />
}

1 Ответ

2 голосов
/ 11 апреля 2020

Удалить ключевое слово this, поскольку ваш компонент является функциональным компонентом 

const renderTableData = () => {
        return items.stude.map((stud, index) => { // remove this
            const { Services, Charges, Comments } = stud //destructuring
            return (
                <tr >
                    <td>{Services}</td>
                    <td>{Charges}</td>
                    <td>{Comments}</td>
                </tr>
            )
        })
    }

return (
            <div>
                <h1 id='title'>React Dynamic Table</h1>
                <table id='students'>
                    <thead>
                     <tr>
                       <th>Services</th>
                       <th>Charges</th>
                       <th>Comments</th>
                     </tr>
                    </thead>
                    <tbody>
                        {renderTableData()} // remove this
                    </tbody>
                </table>
            </div>
        );
...