How to use REACT HOOK FORM with TYPESCRIPT

📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
Today we learn how to use React Hook Form with Typescript. I'll create a react application using create react app with typescript template and then i'll define a form that will be handled by react-hook-form
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code: github.com/satansdeer/rhf-ts
Where to find me:
Discord: / discord

[@serdcevputi]

Спасибо Макс! Хорошо объясняешь!

[@faradniftaly8893]

Great video very clean explanation ... Thx!

[@AntonioBrandao]

Lol this channel is ridiculously underviewed. Keep it up though

[@amariliscamargo]

Muito obrigada!!!!! Me ajudou demais 😊

[@bukenoff]

I like how you make your videos. Straight to the point and very instructive. No nonsense.
Question: should you wrap handleSubmit inside useCallback, like every other function inside functional component?

[@satansdeer1]

Serik B thanks, no don't do it preliminarily, most likely you don't need it. Only do it if you know it will be a performance concern otherwise. Usually it's not

[@pixelxchange]

Your video help me a lot Thank you so much

[@diegor5805]

Thank you very mouch!

[@battmarn]

This just saved my ass. Thanks man

[@CushiMusi1]

Love your videos! could you explain about decorators in typescript ?

[@satansdeer1]

Idan Gigi sure

[@Kedarbhokare]

Thanks for the video, can you please make video on cloud function for server side pagination, use firebase if possible, and how to change pages on client side, thanks in advance

[@mykemacedo696]

Vlw, me ajudou muito

[@rickyalmeida]

Hi, Maskim. Great content as usual, thank you! Let me ask you something, what is the name of your theme on VSCode?

[@satansdeer1]

Ricky Almeida ocean something something from the material theme

[@aaronvasilev2371]

Макс

[@thomaschalanson8643]

Hello and thanks for your tutorial because i'm begin with Typescript.
I try to upload images file with an input file but i got this error and i don't understand how to fix it ?
can you say me what's wrong in my code please ?
Type '(event: FormEventHandler) => void' is not assignable to type 'FormEventHandler'.
Property 'target' does not exist on type 'FormEventHandler'.
here my function :
function formHandler(event: React.FormEventHandler) {
event.preventDefault();
const selectedImg = event.target.files && event.target.files[0];
console.log(selectedImg);
if (selectedImg && Types.includes(selectedImg.type)) {
setFile(selectedImg);
setError("");
} else {
setFile(null);
setError("Please select an file file like png or jpg or svg or webp");
}
uploadfiles(file);
setShowProgress(!showProgress);
}

[@maisaan9075]

How would you do this with reusable components? With the ability to pass required, patterns, min, max etc

[@justirva]

You should create the reusbale form component first. Then just use the reusable form with the hook useForm

[@trumpa94]

This no loger works :(
You get an error when you try to place ref on an element

[@ilianekrasov4807]

same shit... did you figure it out, how to handle this?

[@trumpa94]

@@ilianekrasov4807 i found some custom solution. just google react hook form custom reducer, smthng like that

[@iPingOi]

{...register('password', {
required: true })} -> name="password"

[@NK-xk6bb]

I had the same issue and i found that replacing the input element following this convention worked!
const {register, handleSubmit, formState: {errors} } = useForm()

[@Jonsy]

@@NK-xk6bb You just saved me so much time man thank you!!!

[@almukhametovar]

V6

[@Pareshbpatel]

{{2023-03-19}