CODEWITHSUNDEEP
javascriptreactjstypescriptnext.jsreact-hook-form
Rodrigo
Rodrigo

Reputation: 331

react-hook-form 7 with custom input, empty value

I have the following custom Input component:

export type InputProps = {
  error?: string
} & InputHTMLAttributes<HTMLInputElement>

export const Input: FunctionComponent<InputProps> = ({ error, ...props }) => (
  <input {...props} />
)

Usage

<form onSubmit={handleSubmit(onSubmit)}>
  <Input placeholder="https://example.com" error={errors.url?.message} {...register('url')} />
  <input type="submit" />
</form>

When I try to use it, I get an error on validation because the URL is blank (empty string), I tried to debug, and the function register only returns {name: "url"}, which seems suspicious to me.

What am I doing wrong?

EDIT

I am seeing this on the console

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `Home`.
    at Input (webpack-internal:///./components/input.tsx:10:11)
    at form
    at div
    at div
    at Home (webpack-internal:///./pages/index.tsx:17:90)
    at App (webpack-internal:///./pages/_app.tsx:11:11)
    at Hydrate (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/Hydrate.mjs:30:3)
    at QueryClientProvider (webpack-internal:///./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.mjs:47:3)
    at TRPCProvider (webpack-internal:///./node_modules/@trpc/react-query/dist/createHooksInternal-2bef4843.mjs:158:17)
    at WithTRPC (webpack-internal:///./node_modules/@trpc/next/dist/index.mjs:44:83)
    at PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:62:11)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:3325)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:2:6707)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:60:1)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:173:11)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:346:11)

Upvotes: 2

Views: 277

Answers (1)

Erhan Yaşar
Erhan Yaşar

Reputation: 864

The error tells that you’re trying to give reference to the functional component’s itself via using useRef.

In order to give reference to a functional component, it should be implemented via forwardRef instead.

Other than not being able to see what’s implemented as a code on your end, the error also tells you to take a look at render function of ‘Home’ component, since you used a reference for the input component you shared above under ‘./components/input.tsx’.

I can add how to wrap your component or make an edit to the sandbox if you provide but, there’s more likely for you to get an error of not following a naming convention for React. As per stated within React documentation;

Always start component names with a capital letter

** That means as per the component name Input, you should name your file as Input.tsx

Upvotes: 1

Related Questions