Custom Input Component about react-use-form-state

[wsmd]

Hi @lyyourc,

useFormState is intended to work with DOM elements since it relies heavily on the change event of the input itself to compute the next formState.values after the change occurs. The same applies for formState.touched, formState.validity.

Introducing something like that adds a lot of complexity and prevents this functionality from working properly.

Perhaps you could use React's useState which plays nicely with this library for your use case.

Consider the following:

function MyForm({ onSubmit }) {
  const [formState, { search }] = useFormState({ query: '' });
  
  // maintain the custom input state in a separate hook
  const [tags, setTags] = React.useState([]);

  // merging tags and formState.values
  const finalState = { ...formState.values, tags };

  return (
    <>
      <input {...search('query')} />
      <TagSelector onChange={setTags} values={tags} />
    </>
  );
}

Please let me know if you have any questions, I'd be more than happy to help.