فرض کنیم در فرم خود یک جدول و یک دکمه داریم و  میخواهیم با کلیک بر روی دکمه سطر جدیدی به جدول اضافه شود.برای این کار بصورت زیر  عمل می  کنیم:

import React, { useState } from 'react';

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

   function addRow() {
        var rows = this.state.rows
        rows.push( { id: 3, name: 'حقیقی', email: 'hagh@hgf.com', role: 'کارمند' })
        this.setState({rows: rows})
    },
    return (
        <div className="container">
            <h3 className="p-3 text-center">اسامی </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>
			<tr>
		           <button id="addBtn" onClick={addRow}>ADD</button>
			</tr>

                    )}
                </tbody>
            </table>
        </div>
    );
}

export { App };