React | Why the defaultValue of the input isn't being updated?

Question

I have a stateful component that calls a CEP promise, to fetch data from post offices. This data is fetched when the Zip input is fulfilled with 9 chars - 8 number and an '-' - and return an object with desired information.

Heres the function:

  const handleZipCode = useCallback(
    async ({ target }: ChangeEvent<HTMLInputElement>) => {
      const { value } = target;

      try {
        if (value.length === 9 && isDigit(value[8])) {
          const zip = await cep(value);

          if (zip?.city) {
            setZipData(zip);
          } else
            addressFormRef.current?.setErrors({
              user_zip_code: 'CEP not found',
            });
        }
      } catch (e) {
        addressFormRef.current?.setErrors({
          user_zip_code: e.message ?? 'CEP not found',
        });
      }
    },
    [isDigit]
  );

Then, on the return I have some fields, example:

            <fieldset>
              <legend>Address</legend>
              <Input
                mask=''
                name='user_address'
                placeholder='Rua um dois três'
                defaultValue={zipData.street}
              />
            </fieldset>

Here's the Input component:

const Input: React.FC<InputProps> = ({ name, ...rest }) => {
  const { fieldName, defaultValue, registerField, error } = useField(name);
  const inputRef = useRef(null);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
      // eslint-disable-next-line
      setValue(ref: any, value: string) {
        ref.setInputValue(value);
      },
      // eslint-disable-next-line
      clearValue(ref: any) {
        ref.setInputValue('');
      },
    });
  }, [fieldName, registerField]);

  return (
    <Container>
      <ReactInputMask ref={inputRef} defaultValue={defaultValue} {...rest} />
      {error && <Error>{error}</Error>}
    </Container>
  );
};

However the zipData seems to update, but the default value is not fulfilled. What I'm doing wrong?

What is this Input component? did you make it, or is it from a library? — wmattei
– wmattei, Commented Oct 9, 2020 at 12:53
Is from a library. Actually I'm using unform and react-input-mask. I editted to add the Input component. — augusto amaral
– augusto amaral, Commented Oct 9, 2020 at 12:56

wmattei · Accepted Answer · 2020-10-09 13:00:20Z

2

The default value will not change, as unform is an uncontrolled form library, the defaultValue will be set on the first render of the page and then will not change anymore.

To fix your problem you can do something like:

// on your handleZipCode function
formRef.current.setData({
   zipData: {
     street: zipResult.street,
   },
});

answered Oct 9, 2020 at 13:00

wmattei

5043 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

augusto amaral Over a year ago

I got this error: ref.setInputValue is not a function.

wmattei Over a year ago

Didn't you forget the current?

augusto amaral Over a year ago

A known issue maybe: github.com/Rocketseat/unform/issues/242#issuecomment-706175761

wmattei Over a year ago

Yeah, tbh im not a big fan of unform at all, i recommend you reac-hooks-form

augusto amaral Over a year ago

Okay, next project I'll use, on this will create a giant extra work to change. I'll search for another way to change the value! Thank you!

Collectives™ on Stack Overflow

React | Why the defaultValue of the input isn't being updated?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related