import * as React from 'react' import { createRoot } from 'react-dom/client' import { TanStackDevtools } from '@tanstack/react-devtools' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' import { useForm } from '@tanstack/react-form' interface Person { name: string age: number } const defaultPeople: { people: Array<Person> } = { people: [] } function App() { const form = useForm({ defaultValues: defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, }) return ( <div> <form onSubmit={(e) => { e.preventDefault() e.stopPropagation() form.handleSubmit() }} > <form.Field name="people" mode="array"> {(field) => { return ( <div> {field.state.value.map((_, i) => { return ( <form.Field key={i} name={`people[${i}].name`}> {(subField) => { return ( <div> <label> <div>Name for person {i}</div> <input value={subField.state.value} onChange={(e) => subField.handleChange(e.target.value) } /> </label> </div> ) }} </form.Field> ) })} <button onClick={() => field.pushValue({ name: '', age: 0 })} type="button" > Add person </button> </div> ) }} </form.Field> <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]} children={([canSubmit, isSubmitting]) => ( <button type="submit" disabled={!canSubmit}> {isSubmitting ? '...' : 'Submit'} </button> )} /> </form> </div> ) } const rootElement = document.getElementById('root')! createRoot(rootElement).render( <React.StrictMode> <App /> <TanStackDevtools config={{ hideUntilHover: true }} plugins={[formDevtoolsPlugin()]} /> </React.StrictMode>, )
import * as React from 'react' import { createRoot } from 'react-dom/client' import { TanStackDevtools } from '@tanstack/react-devtools' import { formDevtoolsPlugin } from '@tanstack/react-form-devtools' import { useForm } from '@tanstack/react-form' interface Person { name: string age: number } const defaultPeople: { people: Array<Person> } = { people: [] } function App() { const form = useForm({ defaultValues: defaultPeople, onSubmit({ value }) { alert(JSON.stringify(value)) }, }) return ( <div> <form onSubmit={(e) => { e.preventDefault() e.stopPropagation() form.handleSubmit() }} > <form.Field name="people" mode="array"> {(field) => { return ( <div> {field.state.value.map((_, i) => { return ( <form.Field key={i} name={`people[${i}].name`}> {(subField) => { return ( <div> <label> <div>Name for person {i}</div> <input value={subField.state.value} onChange={(e) => subField.handleChange(e.target.value) } /> </label> </div> ) }} </form.Field> ) })} <button onClick={() => field.pushValue({ name: '', age: 0 })} type="button" > Add person </button> </div> ) }} </form.Field> <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting]} children={([canSubmit, isSubmitting]) => ( <button type="submit" disabled={!canSubmit}> {isSubmitting ? '...' : 'Submit'} </button> )} /> </form> </div> ) } const rootElement = document.getElementById('root')! createRoot(rootElement).render( <React.StrictMode> <App /> <TanStackDevtools config={{ hideUntilHover: true }} plugins={[formDevtoolsPlugin()]} /> </React.StrictMode>, )
