Unform

Initial data

Initial data

To provide custom initial data to inputs you can provide an initialData prop to <Form />:

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

As, most of the times, Unform uses 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 don't reflect changes.

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 propery name provided in the object received as parameter.

Edit this page on GitHub