DEV Community

Roberto Conte Rosito
Roberto Conte Rosito

Posted on • Originally published at blog.robertoconterosito.it on

10

How to use setValue with React Hook Form

My dev notes about how to set value with React Hook Form. Following the official documentationyou can set a value with React Hook Form using the setValue method to change it programmatically like this:

const { setValue } = useForm();
...
setValue("firstName", "bill");

Enter fullscreen mode Exit fullscreen mode

But this is wrong!

You have to use the setValue method to change the value of a field programmatically, but only using the useFormContext hook instead of the useForm hook:

const { setValue } = useFormContext();
...
// Somewhere inside the form
setValue("firstName", "bill");

Enter fullscreen mode Exit fullscreen mode

Remember: the first one is used during initialization of the form, the second one is used inside the form.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
nelsonsilvahubel profile image
NelsonSilvaHubel

Using the setValue of useFormContext the value of a field change programmatically but the save button of form is disabled anyway.
The save button is only enabled if i change the field manually.
Any tip to solve that? (Im using SimpleForm of react_admin)

Collapse
 
robyconte profile image
Roberto Conte Rosito

Have you checked list of touched fields when using setValue?

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more