Repeated contacts

An outer formlet arranges six contact boxes created by a loop. Each box owns a separate Data branch: c1, c2, through c6. The relative field bindings stay identical, so editing one contact leaves the others unchanged.

Example · React

Code

How it works · React

The loop builds six keyed sections. State is grouped under c1–c6, and each card’s handler captures its key before updating that part of the state. Stable React keys identify the sections; CSS Grid arranges them.

How it compares

The Gramlot helper reuses unchanged relative bindings because each call supplies a new container datapath. This React recipe captures a key and explicitly updates the corresponding nested state. A React Contact component could encapsulate that work, but it would be an additional component to implement. Gramlot’s helper only composes widgets: scope propagation already comes from the framework and requires no custom binding component.