initialData not working

[antuneslv]

Description of bug

Initial data is not providing any value for the input field.

To Reproduce

To test it I reproduced the same code code as in the documentation.

import { Form } from '@unform/web'

export default function MyForm() {
  return (
    <Form initialData={{ email: 'test@example.com' }}>
      <input name='email' />
    </Form>
  )
}

Expected behavior

Expected an input with a value of test@example.com

Exception or Error

This issue is not accompanied by an exception or an error.

Screenshots

As you can see, the input is blank.

Environment:

• OS: Windows 10
• Browser: Chrome (102.0.5005.63)
• Node: 16.14
• React: 18

[HugoFortunato]

@antuneslv Hey Antunes!

There are some factors that catch my attention.

Did you declared the hook useField? const {..., defaultValue} = useField(...)

It's necessary than you use defaultValue in your input for your initialData found.

import { Form } from '@unform/web'


export default function MyForm() {
 const inputRef = useRef(null)
 const {fieldName, registerField, defaultValue, error} = useField(name)
 
 useEffect(() => {
   registerField({
    name: fieldName,
    ref: inputRef.current,
    path: 'value'
})
}, [fieldName, registerField])

  return (
    <Form initialData={{ email: 'test@example.com' }}>
       <input name='email'  defaultValue={defaultValue}  ref={inputRef} {...rest}/>
    </Form>
  )
}

[HugoFortunato]

@antuneslv For example, I tested a code creating a separate component Input and I use inside App. It works form me:

Input component:

import { useField } from "@unform/core";
import { useEffect, useRef } from "react";

export default function Input({ name }: any) {
  const inputRef = useRef(null);
  const { fieldName, registerField, defaultValue } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: "value",
    });
  }, [fieldName, registerField]);

  return <input ref={inputRef} defaultValue={defaultValue} />;
}

App

import { useField } from "@unform/core";
import { Form } from "@unform/web";
import "./App.css";
import Input from "./Input";

function App() {
  function handleSubmit(data: any) {
    console.log(data);
  }

  return (
    <div className="App">
      <h1>Hello World</h1>

      <Form onSubmit={handleSubmit} initialData={{ email: "test@example.com" }}>
        <Input name="email" />
      </Form>
    </div>
  );
}

export default App;

Please, send me a feedback and I'll help you if you need. Bye!

[antuneslv]

@HugoFortunato thanks for your reply.

I had to create an input component and use defaultValue to get it right. Using direct input without being a component wasn't working very well because of the properties of the input itself.

Now it's working, thanks for the help.