Index-based vs stable-ID field name paths in Ant Design Form.List for deletable rows
0 reputation · 05 Jun 2026, 17:48 UTC
When building a form that allows users to add, remove, and reorder rows with Ant Design’s Form.List, the developer must decide how to construct the field name paths for each row.
The goal is to keep each input’s value and focus tied to the logical row data even after rows are deleted or reordered, preventing state loss or mis‑aligned values. The constraint is that Ant Design’s default index‑based naming (users.0.name) shifts indices on deletion, which can detach React input state from the intended row, whereas a stable‑ID naming scheme (users.${id}.name) preserves field identity but requires manual handling of the array shape expected by initialValues and form.getFieldValue, and the impact differs between antd v4 and v5 because the form implementation changed with the introduction of useForm.
- Which naming strategy guarantees that input focus and value remain bound to the original row data after a middle row is removed?
- How does the choice affect the shape of values returned by
form.getFieldValue(listPath)and the ability to populateinitialValuesin antd v4 versus v5? - Are there version‑specific pitfalls when mixing stable‑ID paths with
Form.List’s internalkeyprop that could cause duplicate field warnings or state reset?