React Hook Form V7 with Material UI and Typescript Tutorial | Part 3 -- useFieldArray

Подписаться 7 тыс.

Просмотров 13 тыс.

50% 1

In this video, I will help in understanding useFieldArray to create dynamic lists or tables.
Link to starter project to follow along:
github.com/leoroese/reacthook...
Part 3 Finish: github.com/leoroese/reacthook...
React-Hook-Form Docs:
react-hook-form.com/
Timestamps
0:00 Intro
0:46 project start
3:46 InstructionsList component
4:37 useFieldArray
10:48 useFieldArray remove
11:47 Controller fix

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 17

@aleksandrmatyka3118 2 года назад

The best tutorial series for hooks form on youtube

@captainlennyjapan27 2 года назад

React Hook Form with MUI is so much headache... thank god I found this video!

@mateovivas6920 2 года назад

Leo, you are awesome, thanks for such great tutorial!

@danielnguyen825 2 года назад

thanks so much, waiting for more video from this channel

@youngmuyang747 2 года назад

What a helpful!

@shmuelroth4995 Месяц назад

Hi I know you uploaded it a long ago, the think I liked is the usig types in useFieldArray. The problem is that in my form I have useFieldArray inside useFieldArray and in this case its doesnt recognize the type

@kevyyar 2 года назад

How do you limit the append length? Like for example you're only allowed to add 3 ingredients and instructions max. Is there a way to limit that?

@iamabhirupdatta Год назад

One solution can be use the "rules" key and mentioning the "maxLength" validation. const { fields, append, prepend, remove } = useFieldArray({ name: "cart", control, rules: { required: "Please add atleast 1 item", maxLength: { value: 4, message: "Max 4 items" } } }); And in JSX you can use, {errors.cart?.root?.message} The errors object is destructured from useForm.

@albertobertollo1764 Год назад

I have an issue after submitting values inside a fieldArray, where I'm able to send data to the db but after i refresh the page fieldArray's data seems gone. Even if I have my data stored inside the db. Does somebody know why?

@vr4836 2 года назад

#LeoAwesome

@ChristianKolbow 2 года назад

My only Problem is to use React Hook Form V7 with MUI Autocomplete and multiple Selections. I don't get it.

@CodeDunks 2 года назад

Yeah I remember when I setup MUI Autocomplete before that it was a little annoying to get right. I tried looking for the code within my repositories but wasn't able to find it anywhere. I am not sure I used it with React Hook Form however.

@danniixxp 2 года назад

@@CodeDunks +1 on the above. I've now spent multiple hours trying to make MUI Autocomplete work with multiple options and React Hook Form and nothing worked...

@ChristianKolbow 2 года назад

@@danniixxp This is my Solution ( { if (option.firstname !== undefined) { return option.firstname + ' ' + option.lastname; } else { return val || ''; } }} renderOption={(props, option) => ( {option.firstname} {option.lastname} )} renderInput={(params) => } /> )} />

@danniixxp 2 года назад

@@ChristianKolbow What does your handleChange function do in this instance?

@thundergabriel 2 года назад

React-hook-form with NextJS is imposible to use. But good video. 👍

@CodeDunks 2 года назад

Appreciate it Gab! Just curious, I have been using react-hook-form with next.js for my last couple of projects. What issues have you been running into?