React Js Table Row Edit and Delete Button (React Table Editable)

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

function App() {
            const [rows, setRows] = useState([
                { name: 'Alice', email: 'alice@example.com', editing: false },
                { name: 'Michael', email: 'michael@example.com', editing: false },
                { name: 'Emily', email: 'emily@example.com', editing: false },
                { name: 'David', email: 'david@example.com', editing: false },
                { name: 'Sarah', email: 'sarah@example.com', editing: false },
                { name: 'Daniel', email: 'daniel@example.com', editing: false },
                { name: 'Olivia', email: 'olivia@example.com', editing: false },
                { name: 'Andrew', email: 'andrew@example.com', editing: false }
            ]);

const deleteRow = (index) => {
                const updatedRows = [...rows];
                updatedRows.splice(index, 1);
                setRows(updatedRows);
            };

const addRow = () => {
                const newRows = [...rows, { name: '', email: '', editing: true }];
                setRows(newRows);
            };

return (
                <div className='container'>
                    <h3>React Js Table with edit and delete button</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {rows.map((row, index) => (
                                <tr key={index}>
                                    {!row.editing && <td>{row.name}</td>}
                                    {!row.editing && <td>{row.email}</td>}
                                    {row.editing && <td><input type="text" value={row.name} onChange={(e) => {
                                        const updatedRows = [...rows];
                                        updatedRows[index].name = e.target.value;
                                        setRows(updatedRows);
                                    }} /></td>}
                                    {row.editing && <td><input type="email" value={row.email} onChange={(e) => {
                                        const updatedRows = [...rows];
                                        updatedRows[index].email = e.target.value;
                                        setRows(updatedRows);
                                    }} /></td>}
                                    <td>
                                        {!row.editing && <button className="edit-button" onClick={() => editRow(row)}>Edit</button>}
                                        {row.editing && <button className="save-button" onClick={() => saveRow(row)}>Save</button>}
                                        <button className="delete-button" onClick={() => deleteRow(index)}>Delete</button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    <button className="add-button" onClick={addRow}>Add Row</button>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 600px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.container h3 {
            margin-bottom: 20px;
            font-size: 24px;
            color: #333;
        }

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

.container th,
        .container td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ccc;
        }

.container th {
            background-color: #f9f9f9;
            font-weight: bold;
            color: #333;
        }

.container td input[type="text"],
        .container td input[type="email"] {
            width: 100%;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

.container td button {
            padding: 8px 12px;
            margin-right: 5px;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

.container td .edit-button {
            background-color: #4caf50;
            color: #fff;
        }

.container td .save-button {
            background-color: #007bff;
            color: #fff;
        }

.container td .delete-button {
            background-color: #dc3545;
            color: #fff;
        }

.container .add-button {
            margin-top: 20px;
            padding: 10px 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

.container .add-button:hover {
            background-color: #0069d9;
        }

.container .add-button:focus {
            outline: none;
        }
    </style>
</body>

</html>