Dynamic Forms Dynamic Form Fields
Last updated: 2026-11-02
Dynamic Forms Dynamic Form Fields
When the number of fields is not fixed, drive the rendering from an array kept in state: each field stores one record, adding and removing fields means adding and removing array items, and updating a single field means mapping over the array and replacing the entry with a matching id. With stable keys, React then reuses the input state of each row correctly. The array is the single source of truth, so add, edit and remove are three small pure updates rather than three separate pieces of state to reconcile.
| Group | Component Patterns |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const [rows, setRows] = useState([{ id: 1, name: '' }])
setRows([...rows, { id: nextId(), name: '' }]) // add a row
setRows(rows.filter(r => r.id !== id)) // remove a row
setRows(rows.map(r => r.id === id ? { ...r, name: v } : r)) // edit one cellReturns：No return value; this entry describes an encoding pattern rather than a function.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
One input row by default; clicking "+ Add row" appends a row and "Remove" deletes one, each row keeps its own input, and the count at the bottom updates in real time.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
