React Table Add Row Dynamically

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel" data-presets="env,react">
        const { useState, useEffect, useRef } = React;

return (
                <div className='container'>
                    <h3>React Js Add Table Row Dynamically </h3>
                    <div className="table-container">
                        <button onClick={() => setShowModal(true)} className="add-button">
                            Add Row
                        </button>
                        <table>
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Age</th>
                                </tr>
                            </thead>
                            <tbody>
                                {tableData.map((row, index) => (
                                    <tr key={index}>
                                        <td>{row.name}</td>
                                        <td>{row.age}</td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>

{showModal && (
                        <div className="modal-container">
                            <div className="modal">
                                <h2>Add Row</h2>
                                <form onSubmit={addRow}>
                                    <label>
                                        Name:
                                        <input
                                            type="text"
                                            value={newRow.name}
                                            onChange={(e) =>
                                                setNewRow({ ...newRow, name: e.target.value })
                                            }
                                        />
                                    </label>
                                    <label>
                                        Age:
                                        <input
                                            type="number"
                                            value={newRow.age}
                                            onChange={(e) =>
                                                setNewRow({
                                                    ...newRow,
                                                    age: parseInt(e.target.value),
                                                })
                                            }
                                        />
                                    </label>
                                    <button type="submit" className="add-button">
                                        Add
                                    </button>
                                    <button
                                        onClick={() => setShowModal(false)}
                                        className="cancel-button"
                                    >
                                        Cancel
                                    </button>
                                </form>
                            </div>
                        </div>
                    )}
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>

h3 {
            font-size: 18px;
        }

.add-button {
            margin-bottom: 10px;
            padding: 5px 10px;
            background-color: #337ab7;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

table {
            width: 100%;
            border-collapse: collapse;
        }

thead {
            background-color: #f5f5f5;
        }

th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

th {
            font-weight: bold;
        }

tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

tbody tr:hover {
            background-color: #f2f2f2;
        }

.modal-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            /* Ensure the modal appears on top of other elements */
        }

.modal {
            background-color: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            max-width: 600px;
            margin: 0 auto;
        }

h2 {
            font-size: 16px;
        }

form {
            display: flex;
            flex-direction: column;
            margin-top: 10px;
        }

label {
            margin-bottom: 5px;
        }

input[type="text"],
        input[type="number"] {
            padding: 5px;
            border-radius: 4px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
        }

.add-button,
        .cancel-button {
            background-color: #337ab7;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.add-button:hover,
        .cancel-button:hover {
            background-color: #23527c;
        }

.cancel-button {
            background-color: #ccc;
            margin-right: 10px;
        }
    </style>
</body>

</html>