function ArrayTextField({placeholder}) {
const field = useFieldContext<Array<string>>()
const form = useFormContext()
return (
<div>
{
field.state.values.map((_, index) => {
<form.Field
key={index}
name={`${field.name}[${index}]`}>
{(subfield) => (
<Input
value={subfield.state.value}
onChange={(e) => {
subfield.handleChange(e.target.value)
}}
onBlur={subfield.handleBlur}
placeholder={placeholder}
/>
)}
</form.Field>
})
}
<button onClick={field.pushValue("")}>
Add
</button>
</div>
)
}
function ArrayTextField({placeholder}) {
const field = useFieldContext<Array<string>>()
const form = useFormContext()
return (
<div>
{
field.state.values.map((_, index) => {
<form.Field
key={index}
name={`${field.name}[${index}]`}>
{(subfield) => (
<Input
value={subfield.state.value}
onChange={(e) => {
subfield.handleChange(e.target.value)
}}
onBlur={subfield.handleBlur}
placeholder={placeholder}
/>
)}
</form.Field>
})
}
<button onClick={field.pushValue("")}>
Add
</button>
</div>
)
}