React Hook Form Not Updating Value If Default Values Is Array

Question

I am creating a dynamically generated form which reads a file from a template. I have an array of "questions" which are mapped onto a react-hook-form. The defaultValues I am using is an array of objects. The issue I am having is using react-select inside of a react-hook-form controller because it does not set the form state if it is an array. In my testing it works without issue if default values is not an array. Please see my MRE code example

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: questions,
    });

    const onSubmit = (data: any) => console.log(data);

    return (
        <form onSubmit={methods.handleSubmit(onSubmit)}>
            <Controller
                name="0.value"
                control={methods.control}
                render={({ field }) => (
                    <Select
                        {...field}
                        value={options.find((c) => c.value === field.value)}
                        options={options}
                        onChange={(e) => field.onChange(e?.value)}
                    />
                )}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

What would be the best way to get react-hook-form controllers components like react-select to work with an array of defaultValues

can you change const methods = useForm({ defaultValues: questions, }); to const methods = useForm({ defaultValues: questions[0], }); — Suresh
– Suresh, Commented Jul 18, 2022 at 15:52
yes that will fix the problem, but the idea is the array has multiple questions that each need their own object in the array. This will only fix it for object at index 0. — George
– George, Commented Jul 18, 2022 at 15:56
to be precise default value should be only one . if you want default options then as per your code you need to add default options values to the options — Suresh
– Suresh, Commented Jul 18, 2022 at 15:58
how would I go about setting default values for my array of questions? — George
– George, Commented Jul 18, 2022 at 16:01

Root0x · Accepted Answer · 2022-07-19 08:42:58Z

The issue you are having is due to your default values being an array instead of an object. You should just wrap your questions in an object with a key of your choice. Please see example.

const questions = [
{
    value: '',
}];

const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
];

export default function Form()
{
    const methods = useForm({
        defaultValues: {questions},
    });

const onSubmit = (data: any) => console.log(data);

return (
    <form onSubmit={methods.handleSubmit(onSubmit)}>
        <Controller
            name="questions.0.value"
            control={methods.control}
            render={({ field }) => (
                <Select
                    {...field}
                    value={options.find((c) => c.value === field.value)}
                    options={options}
                    onChange={(e) => field.onChange(e?.value)}
                />
            )}
        />
        <button type="submit">Submit</button>
    </form>
);

Collectives™ on Stack Overflow

React Hook Form Not Updating Value If Default Values Is Array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related