T
TanStack•3mo ago
firm-tan

Reusable array component

Hi, I am trying to create reusable array component but it feels like i am doing something wrong. What is idiomatic way to do it? I am at this so far: 
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>
    )
}
(I get string cannot be assigned to never on name property and string cannot be assigned to updaterFn<never,never> in onChange)
6 Replies
like-gold
like-gold•3mo ago
The form is typed as not having any fields, as this isn't really the intended usage of Form Composition besides, even if it were typed to have some sort of fields, TS would not be able to infer that ${field.name}[${field.index}] must exist
firm-tan
firm-tanOP•3mo ago
Is there better way to acomplish this?
like-gold
like-gold•3mo ago
Depends. With your current idea, you hide the logic of the fields behind the component, so you lose out on changing them later. Is that a problem, or do you already know what the configuration of the field is in advance?
firm-tan
firm-tanOP•3mo ago
I have similar array fields reused multiple times in my designs. So i know configuration and that they are stable. I need to change stuff like label and so but logic stays the same.
like-gold
like-gold•3mo ago
withFieldGroup could be the answer you're looking for. It allows the child fields to use AppField, which in turn means you can use field components. Rough draft of what it would look like: 
const YourStringArray = withFieldGroup({
  // what structure does it expect?
  // -> a property with string[].
  // it should be an actual runtime object so that
  // Object.keys() receives it properly. The value is unused.
  defaultValues: { array: [''] },
  render: function Render({ group }) {
     return <group.AppField name="array" mode="array">
       {/* ... */}
     </group.AppField>
  }
})


// Usage
const form = useAppForm({
  // ...
})

<YourStringArray form={form} fields={{
   array: 'this.only.allows.string[].paths'
}} />
const YourStringArray = withFieldGroup({
  // what structure does it expect?
  // -> a property with string[].
  // it should be an actual runtime object so that
  // Object.keys() receives it properly. The value is unused.
  defaultValues: { array: [''] },
  render: function Render({ group }) {
     return <group.AppField name="array" mode="array">
       {/* ... */}
     </group.AppField>
  }
})


// Usage
const form = useAppForm({
  // ...
})

<YourStringArray form={form} fields={{
   array: 'this.only.allows.string[].paths'
}} />
firm-tan
firm-tanOP•3mo ago
Thanks i will try this.

Did you find this page helpful?