برای اینکار می توانیم از تابع map استفاده کنیم. ابتدا باید ردیفهای جدول را با استفاده از تابع useState در یک متغیر (در اینجا users ) ذخیره کنیم.

import React, { useState } from 'react';

function App() {
    const [users, setUsers] = useState([
        { id: 1,  name: 'احمدی', email: 'ahmadi@omh.net', role: 'کارمند' },
        { id: 2, name: 'سعیدی', email: 'saeed@mmj.org', role: 'دانشجو' },
        { id: 3, name: 'حقیقی', email: 'hagh@hgf.com', role: 'کارمند' }
        
    ]);

    return (
        <div className="container">
            <h3 className="p-3 text-center">نمایش یک لیست در react </h3>
            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>نام</th>
                        <th>ایمیل</th>
                        <th>شغل</th>
                    </tr>
                </thead>
                <tbody>
                    {users && users.map(user =>
                        <tr key={user.id}>
                            <td>{user.name} </td>
                            <td>{user.email}</td>
                            <td>{user.role}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        </div>
    );
}

export { App };