Hi all, I am considering this library for use in the project were we have several custom components which don't expose refs so idea is to use setValue function when value changes like ReactSelect is used in the example:

From the example: We track components state manually:

const [values, setReactSelect] = useState({
    selectedOption: []
  });

Then change handler is defined and it needs to call two state update functions:

 const handleMultiChange = selectedOption => {
    setValue("reactSelect", selectedOption);
    setReactSelect({ selectedOption });
  };

And finally we use component like:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={values.selectedOption}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

This seems like a lot of extra work, especially if you have 10 such components on the form.

My question is can we use something like this:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={watch("reactSelect")}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

or this:

<Select
            className="reactSelect"
            name="filters"
            placeholder="Filters"
            value={getValues().reactSelect}
            options={options}
            onChange={handleMultiChange}
            isMulti
          />

or is there some other solution?

Thanks, Milos

December 5, 2019 at 1:03am

Jerome@jeromedeleon

Team

1:03am

Have you tried using the wrapper component?

1:04am

Try searching for react-hook-form-input

December 5, 2019 at 9:10am

Milos@milosdavidovic

9:10am

@jeromedeleon

, thanks for the reply. I've seen that, I can give it a try although it is an extra dependency. But what do you think about solutions proposed above (watch and getValues)?

December 6, 2019 at 2:00am

leekuo@leekuo

2:00am

Hey guys, do you know how I could make a field required or not depending on the button that is pressed?

December 10, 2019 at 2:58pm

Ernesto Navarro@enavarrocu

2:58pm

Hello people, I'm having an weird issue, or maybe I'm doing something that is not correct.

2:58pm

I'm trying to reset/clear the value of the subform. But the Main form get cleared as well.

Edited

Jerome@jeromedeleon

Team

3:07pm

I don't see any errors here. You can customize the reset method by passing

// retain your main form
const mainForm = {
  name: "Testing",
};
// reset your form
const subForm = {
  other: "",
};
reset({
  ...mainForm,
  ...subForm
});

Edited

Ernesto Navarro@enavarrocu

3:08pm

@jeromedeleon

Thank you for replying very quick. There are not errors, but I don't want to reset the value of name, only the value of "other"

Jerome@jeromedeleon

Team

3:09pm

My bad, Spectrum doesn't support multi-line by pressing "Enter"

Edited

3:09pm

Please, see me my edited answer.

Edited

Ernesto Navarro@enavarrocu

3:10pm

Jerome@jeromedeleon

Please, see me my edited answer.

Waiting for the edit :)

Jerome@jeromedeleon

Team

3:11pm

I already edited it. You can refresh the page.

Edited

Ernesto Navarro@enavarrocu

3:14pm

In my example is not exactly like my code but I had to make it easy and sort, the subform shouldn't be aware of the mainForm, they are independent components

3:15pm

the idea of the subform is to add elements to a list that belongs to the main form

3:16pm

when you add it I want that subform to be cleared

3:16pm

I will try with that reset, but I find it weird the second reset clear the first form

Show more messages

This conversation has been locked