Deviopath › React

Inventory Manager

Hard · Lists

Build an inventory table where a whole row is edited at once, like a small form.

Each item is <tr data-id="1"> in <tbody> with <td className="name">, <td className="qty"> and the buttons "Edit" and "Delete".

"Edit" shows <input className="name-input"> and <input className="qty-input"> (prefilled) plus "Save" and "Cancel" in that row.

- Only one row is edited at a time: "Edit" on another row switches to it and discards unsaved changes.

- "Save" is disabled until a value differs from the saved one.

- "Save" needs a non-empty name (trimmed) and a whole-number quantity (0 or more); otherwise show <p className="error">Invalid item</p> and stay in edit mode.

- "Cancel" leaves edit mode without changes. "Delete" removes the row.

<p className="total">Total items: 33</p> shows the sum of quantities.

Next: Editable Table