Initial data

To provide initial custom data to inputs, you can provide an initialData prop to the Form component:

Copy
1export default function MyForm() {
2  return (
3    <Form initialData={{ email: 'test@example.com' }}>
4      <Input name="email" />
5    </Form>
6  );
7}

Set initial data asynchronously

Most of the time, Unform uses the defaultValue prop of inputs to set the initial data. When you get the data from an API request or an asynchronous call, the initialData may not work, as the defaultValue doesn't reflect changes.

Copy
1export default function MyForm() {
2  const formRef = useRef(null);
3
4  useEffect(() => {
5    someApiCall().then(user => {
6      formRef.current.setData({ email: user.email });
7    });
8  }, []);
9
10  return (
11    <Form ref={formRef}>
12      <Input name="email" />
13    </Form>
14  );
15}

The setData function exposed by Unform API will replace input data based on the property name provided in the object received as a parameter.