import React, { useState } from 'react';

const AddRemoveRows = () => {
  const [rows, setRows] = useState([
    { id: Date.now(), name: '', age: '' }
  ]);

  // Add new row
  const handleAddRow = () => {
    setRows([...rows, { id: Date.now(), name: '', age: '' }]);
  };

  // Remove row by ID
  const handleRemoveRow = (id) => {
    setRows(rows.filter(row => row.id !== id));
  };

  // Handle input change
  const handleChange = (id, field, value) => {
    setRows(rows.map(row =>
      row.id === id ? { ...row, [field]: value } : row
    ));
  };

  return (
    <div>
      <h2>Add/Remove Rows Example</h2>
      <table border="1" cellPadding="10">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, index) => (
            <tr key={row.id}>
              <td>
                <input
                  type="text"
                  value={row.name}
                  onChange={(e) => handleChange(row.id, 'name', e.target.value)}
                />
              </td>
              <td>
                <input
                  type="number"
                  value={row.age}
                  onChange={(e) => handleChange(row.id, 'age', e.target.value)}
                />
              </td>
              <td>
                <button onClick={() => handleRemoveRow(row.id)} disabled={rows.length === 1}>
                  Remove
                </button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>

      <button onClick={handleAddRow}>Add Row</button>
    </div>
  );
};

export default AddRemoveRows;