TanStackT
TanStack•5mo ago•
7 replies
primary-violet

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>
    )
}


(I get string cannot be assigned to never on name property and string cannot be assigned to updaterFn<never,never> in onChange)
Was this page helpful?