Create Dynamic Form Fields in React

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

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

50% 1

By creating dynamic form this will help if you don't know how much input fields user want, and we are going to use Material-UI just for make it little bit loot nicer.
Code: github.com/candraKriswinarto/...
Material-UI : material-ui.com/getting-start...
Support The Channel:
paypal.me/canddev
🌎 Find Me Here:
Instagram : / candra_kriswinarto
GitHub: github.com/candraKriswinarto/
Linkedin: / candra-kriswinarto
------------------------------
Levity by Johny Grimes / johny-grimes
Creative Commons - Attribution 3.0 Unported - CC BY 3.0
Free Download / Stream: bit.ly/2sUZMCR
Music promoted by Audio Library • Levity - Johny Grimes ...
------------------------------
#dynamicForm #React #enjoyCoding

Наука

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

18 июл 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@xxfce11 3 года назад

With splice() function in your handleAddFields() handler you will be able to add new fields in beetween existing fields, not only at the bottom like you've done it. Try this: handleAddFields(index) { const fields = [...this.state.inputFields]; fields.splice(index+1, 0, { firstName: "", lastName: "" }); this.setState({ inputFields: fields }); } The difference is I work with class-based component here. Also note that you have to pass index into the event handler. By the way - excellent tutorial, helped me a lot :)

@khandoor7228 4 года назад

awesome job CanDev I have been looking for an example of this for a while!!!

@Bluesmile84 3 года назад

Precise, Excellent and very useful video for beginners. Good work.

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

This is exactly what I was looking for. Thank you so much.

@ajaybedre4199 3 года назад

Very Very useful ! I struggled lot and got landed here, Thank you!!

@yemmeth 4 года назад

That's a great tutorial! Helped me lots with my current project

@bahiaanis331 3 года назад

so what's your work thank you

@nijarshrestha3745 3 года назад

Great tutorial, helped me a lot with my current project.

@MrJacques5656 Год назад

Very slick piece of coding and saved me a ton of time. Thank you!

@mikealejandro3938 3 года назад

Broh, this was dope, you the greatest !

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

This is a great tutorial! Well explained.

@user-kj9zc9nc6h 3 года назад

Keep on going man. Useful tutorial

@durgeshjhalwa6639 3 года назад

Best video for dynamic form really awesome ,Thank you so much for this video

@samsonwong8242 3 года назад

Excellent Detailed Example !!

@rohittewari6902 Год назад

Thank you so much for helping me out. I was finding the solution for 2 days❤

@Human_Evolution- 2 года назад

Very awesome. I think I'd prefer it without the styling but I love it. Great job.

@joaquinpettinari200 3 года назад

I just see the code and it works, thanks!!!!!! You have a new suscriber

@maingocdieptran2489 3 года назад

Thank you so much... It helps me a lots! 😀

@giantqtipz6577 3 года назад

This is a pretty easy to follow tutorial

@sultanalmuhon9 3 года назад

It helped a lot. Thanks, man

@sweetshoez Год назад

I was stuck on this sort of problem (but I wanted to render a dynamic number of fields based on user input) for hours. I could get the forms to render but I could not figure out how to watch a dynamic number of inputs in state AND having a way to access their unique values. I tried to do what I wanted with your pattern, and I could probably figure it out eventually but this worked and is great in its on way. Thank you

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

This video is the best video we apply this in many ways thank you for this video....sir...... it was applied by me in my live project in many places such a essential video for all ........thank you very much for this video

@madhu1591 Год назад

Hello, I want to store and persist the data entered in this dynamic form fields into local storage. Do you have any idea about it.

@DidYouKnowThis. 3 года назад

Thank you so much..This is a very useful project.

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

Great!!! Thanks for the video :)

@sarathchandran2815 3 года назад

Awesome tutorial. Subscribed

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

you are a lifesaver, I cant thank you enough.

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

thanks a lot man! awesome tutorial

@roopapalanisamy3054 3 года назад

Thanks for the precise video

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

Great tutorial! Thanks

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

please post more videos like this, it was perfect thanks 🙏🙏🙏❤❤

@MarcelaVilasBoasCharchar 4 года назад

Thank you very much! Help a lot!

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

Thanks a lot.. It helps my current project..

@tuna3539 3 года назад

I appreciate you bro , you saved my time.

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

You are real master ... !!! Cool Resource Thank a lot .... Bro

@DhiaMagicien 3 года назад

Excellent tutorial

@thecensorguy1237 3 года назад

worked like a charm

@ashwinim2391 3 года назад

Helpful.. thanks ☺️

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

Simply Wow. Thank You. Jajak Allah khaier.

@derickfabert9681 3 года назад

Great video... I have been having trouble with this for a few weeks now. I have a problem where the cursor blurs after I enter each character. Any ideas?

@rohan1765 3 года назад

Thank you , that was perfect 👍🏻

@al-mokhtar_ 3 года назад

putin learning to code !!! why?

@jakecheek1359 3 года назад

This helped a lot thanks

@edspressomartini 3 года назад

very cool thanks sir!

@Maybehassanawad 3 года назад

You helped me a lot

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

great tutorial man...

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

Perfect one

@muhammadabbas5365 3 года назад

Thanks for the video bro, can u share how to submit all the data in post api controller?

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

Thank you, the video helped me a lot. Also, Why when i try get current inputFields within useCallback, i get only one item and not the rest of items?

@ams4825 3 года назад

Hi. Could you advise on how to validate those new fields with Joi?

@kapiljain4423 Год назад

i need to use grid in my project,shall i go for ag-grid community version? please suggest.

@g.bagiryan 3 года назад

Thanks for this video man, really helpful. Could you help me with a question though? Say I have the same structure except the fields are called Key and Value and I also have a selector for value type which can be a nested object with the same Key value fields. How would I collect all that data into one nested json object? What I did is whenever i pick value type as an Object, I recursively draw the same component, but I couldn't figure out a good way to transfer child objects data to parent. If i do it on onChange event the number of rerenders for a single input is crazy...

@voidsid5381 3 года назад

Great!!! Thank you

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

meannnnn very very very great big more big and very big special thanks for you and you video !!!!

@deejiw 3 года назад

thank you for sharing

@feddagmohammedzineddine3272 3 года назад

hello , i havn't find the source code on the git repo you shared , may i know where is the problem

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

Hi, very good tutorial. So I am trying to add dynamic fields in my project and splice function is working as expected in managing array but, it always removes input field from the last and does not also update in UI . any help

@oskki8752 Год назад

I've got a problem with component from Material UI, as it does not support onChange, when clicking on dropdown MenuItems. Anyone got idea, how to actually dynamically change the value of the Select component ?

@ngocduy1848 3 года назад

thank u so much!

@asmabenbrahem6 4 года назад

thank you !

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

do you have live version? Is it editable?

@tanishqgaba5697 3 года назад

What if instead of input field , we want a by default defined dropdown list?

@ravikirun6783 3 года назад

Fantastic

@ignasave 3 года назад

Dude you saved me with my proyect

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

why cant I type any characters in the form inputs? i just set it exactly like you did in the video, but the value is really can not be changed

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

how you can avoid deleting the last/first field?

@gianlucasantos3302 3 года назад

Could you maybe show how to validate this form ? Like with yup we can define a Schema for the validation, but how would we do this with a dynamic form ?

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

any suggestions for dynamic dropdowns like this

@shohagkhan3677 3 года назад

Thanks for this important tutorial. It will be very much effective for us, if you show how to submit this data using express or laravel rest api.

@madhu1591 Год назад

I want to store and persist the data entered in this dynamic form fields into local storage. Can anyone please help me with that

@nadiafirly4671 3 года назад

Thankyou

@abolirode 3 года назад

can you tell how to perform this using formik

@rbisoi6 3 года назад

1000th Subscriber YaY

@nikhilrajbhar7980 3 года назад

thank you..

@xinwang350 3 года назад

Hello sir, one problem about the code I found by the help of eslint is index shouldn't be used as key. quote: "ESLint: Do not use Array index in keys(react/no-array-index-key)" ref1: stackoverflow.com/questions/46735483/error-do-not-use-array-index-in-keys ref2: github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/no-array-index-key.md any idea of how we can modify the code to avoid this?

@CandDev 3 года назад

You can use uuid to generate the id, and use the id for every object in state { id: uuid(), firstName: '', lastName: '' }, or just pull my code in description, i have new commit for that. :)

@rawalpindiupdates 3 года назад

Can you please show how to submit this data to API ?

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

hey man at 22:15 if you pause, can you explain why event.target.name is inside a [ ] bracket

@Mjiujtsu Год назад

This is pretty much what i've done except if I remove the fields in the middle of the form, not from the end like you then the inputs become uncontrolled and lose sync with state

@khandoor7228 4 года назад

Question: what is the rule for when you call a function like this: onSubmit={handleSubmit} and like this onClick={ ( ) => handleAddFields} ? when do you use one or the other?

@CandDev 4 года назад

if you want to pass a parameter to event handlers, you should use ={() => fn}

@khandoor7228 4 года назад

@@CandDev TY!

@kapiljain4423 Год назад

Hello Sir, your lectures are awesome and very helpful. I am beginner. I tried to edit code and replace textfiled with Autocomplete but it is working but autocomplete filed return empty values. i need your help.

@ericng3673 3 года назад

If u remove anything in the middle, it does not actually remove the middle one but always the last one

@aaminbaig1224 3 года назад

Good video , but there's an issue. If you delete a row that exists between the 1st and the last row, it still deletes the last row. Please cross check with that.

@ykasiu 3 года назад

I spend three days to find out how to do that!

@gamingemail9332 3 года назад

question: how to handle if there's nested object or array inside that??? if let say one text field is for { name:"Joe", gender:"male", extra:{ height: , } }

@g.bagiryan 3 года назад

Hey man did you figure it out?