I want to use the React-Hook-Form register function to register an input on my custom input component
https://react-hook-form.com/api/useform/register
index
<form onSubmit={handleSubmit((data) => console.log(data))}>
<SecondaryInput
{...register('username')}
/>
<PrimaryButton type="submit">Test</PrimaryButton>
</form>
And passing the props to the SecondaryInput component
SecondaryInput
function SecondaryInput({ type, label, appereance, iconid, iconsize, ...props }) {
const id = useId();
return (
<Wrapper>
<IconInput
type={type}
appereance={appereance}
id={id}
required
{...props}
/>
<AddSvg id={iconid} size={iconsize} />
<IconLabel htmlFor={id}>{label}</IconLabel>
</Wrapper>
);
}
Clicking the submit button of the form returns me undefined and not the submitted form data:
Object { username: undefined, servicesRadio: undefined }
Index.js
Error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
