React: Add/Remove Input Fields Dynamically on button click

My React Portfolio Course: chaoocharles.gumroad.com/l/re...
Source Code/Starter Files: chaoocharles.dev/source-codes...
✨ Join My Discord Server
/ discord
SUPPORT MY CHANNEL
📍SUBSCRIBE: / @chaoocharles
📍Buy Me A Coffee: www.paypal.com/cgi-bin/webscr...
📍Join My Fun Channel: / @chaaoo
GET IN TOUCH:
📍 Twitter: / chaoocharles
Disclaimer: This video is not sponsored
#reactjs

[@bartoszturkowyd3608]

Man, I struggled with this for a few days (I am a beginner) and couldn't figure that out. Your video made it so crystal clear! You are a life savior!

[@gameraccount359]

Same here!

[@calebboyer3838]

Brand new to react and JS and this helped so much. Thanks!

[@kamron4825]

Thank you! The one resource that explains this in a non-convoluted way

[@PegahAI]

Woooow!! What I found at the exam night. Huge thanks man!!

[@gagokona]

Thank you! Very clear explanation, keep up the good work!

[@rizud5122]

Superb Tutorial..I have been struggling to understand dynamically adding text boxes for the last 3 days and haven't come across anything as simple yet as detailed as this one. You are explaining each and word of code and why are you doing what you are doing.. You are an amazing tutor😀God bless!!

[@ChaooCharles]

You're welcome 😊

[@engrenzoyoung9964]

God bless you brother. You've just helped me solve a 3 days problem. Thank you very much.

[@bryanlapizlazuli1813]

I've been working on react for my job and this video implemented something that behaves very much like mine. Thank you so much for this lesson, i'll be remembering this from now on!

[@ChaooCharles]

Awesome, glad it was helpful

[@reislerjul]

This is great! Exactly what I needed.

[@DinaterX]

Fantastic tutorial. Even though I'm rusty in React, this was very clear to me. Thank you!

[@ChaooCharles]

You're welcome

[@tungle8041]

your explanation is so clear man. I am very appreciate about your sharing

[@amadousallah8916]

Thank you Chaoo for the great explanation.

[@smashing_data4292]

I found this tutorial to be very helpful. Only struggle I had was implementing the code in TypeScript. Thank you for creating this tutorial.

[@user-tn1zg4ez1r]

did you find a solution for the typescript code ? i am stuck too lol

[@vijaykumawat7414]

You explain very well, Thank you :)

[@samuelesdras]

Congrats brother!! Helped me a lot!! God bless you!!

[@ChaooCharles]

Awesome!

[@abhisekpaul]

Thank man, for this awesome tutorial. Helps me a lot. Keep going 🔥

[@ChaooCharles]

Thanks 😊

[@ankitdas7532]

Great tutorial . Thank you .

[@ilustrados6827]

Thank u very much!! You help me a lot! PD: if anyone is working with Prime React framework use name attribute in InputText component

[@ShashankNaithani]

Thankyou Brother, May god give you everything you want.

[@light-qn2jb]

thank u for your clear explanation

[@RhythmdanceacademyRDA]

what a hearty video for all beginners!

[@odiahebuka5790]

Thank you very much! Really helpful. God bless 🙏

[@aaronanama9414]

Well explained. Thanks.

[@mehmetyagzcebisli1569]

The most useful video I've ever seen great job!!!!!!!!

[@robertojordan3407]

Thank you!! you are my hero!!

[@keepcalmandcodeon.]

LESSSSGGOOOO MY BROTHER, THANK YOU 😀

[@thaseagans4728]

Awesome tutorial and easy to follow

[@ChaooCharles]

Thanks

[@Michael100788]

Thank you! You tutorial video help with my problem. I needed to make sure that an array with objects that consist of two keys is passed, like that: [{name: 'something', col: '100'}] We use TypeScipt, React, Express

[@brotherisrael5564]

Thank you for this tutorial on adding and removing rows but how do you then submit to the backend? I am getting an empty array in the backend although the frontend shows an array of objects before submitting

[@kennyvillamarin]

Gracias por compartir tus conocimientos

[@kylarasoth3067]

Thank you very much for the video!

[@ChaooCharles]

Welcome ☺

[@Ganesh-ld8ph]

Thanks for this video bro, helped me a lot...!

[@ChaooCharles]

Welcome bro!

[@ennice]

i like the way you teaching be continues...

[@ChaooCharles]

Thank you 😊

[@mmipardini]

Great video!

[@evansuslovich3720]

Great stuff!

[@TechticalTutorials]

Nice tutorial, how to disable text input if I had text input in file 1.js and the button on the file 2.js?

[@user-qp6is9hm1g]

Thank you ...

[@badral.belmen]

Thanks a lot!

[@ChaooCharles]

Welcome ☺

[@officework2163]

thanks bro ....

[@jasdeepsingh343]

How we can solve the same for radio button

[@ExploreGamingLife]

This is awesome 👍

[@ChaooCharles]

Thank you

[@sreejithkalarikal7198]

Can yo please do a video on valdations on the dynamic arrays on submit button click

[@muhammadkumail9000]

textinput suddendly stop after every single keystroke. kindly tell me the solution or tell me other better handleChangeService function

[@ExploreGamingLife]

Can u make a vdo on how to make a quize generator app using react js?

[@a.chillstechnologies9952]

This is awesome

[@ChaooCharles]

Thank youu

[@youssef-xs8qw]

thank you for tNice tutorials it helped a lot

[@mehmetyagzcebisli1569]

Congrats

[@ChaooCharles]

Thank youu

[@siryussuf5613]

hello, what if you want to display your output in another page

[@ChaooCharles]

Use global state or save data in database or local storage. There are many approaches you can take

[@coffee80119]

Thanks for the tutorial. It's kinda working for me. The problem i have is when i remove an item just the last entry in my input fields gets deleted from the screen, altough the array (when viewing in console.log) is working ok. So the list i see on screen is not the same as the array. Can you maybe help me?

[@ChaooCharles]

I recommend you check the source code. Link at the description section.

[@mirinae1377]

Same problem for me , in console the remove is done okay but from the visual part it always deletes the last element. If you have solved it let me also know please. Thanks in advance!

[@coffee80119]

@@mirinae1377 i copied the source code. That worked fine. Then adjusted it to my needs. Still can’t really find where I made a mistake in my initial attempt

[@mirinae1377]

@@coffee80119 Okay thank you, I think that in the source code all the logic it is made in one component while I have nested ones in my code. I checked and still couldn't figure out why it is behaving like this

[@davidyang5131]

@@mirinae1377 Hi, that is because you do not have the value set. Ensure you have "value={singleService.service}" in the input, that way when you remove and item and it re-renders the list, it knows the value to display.

[@hazemsaeed6372]

How can this work with typescript? I'm talking about this line: list[index][name] = value;

[@jeffreygarcia392]

I have the same headache too, did you figure it out?

[@jeffreygarcia392]

gotcha const handleChange = (e: ChangeEvent, index: number) => { const { value, name } = e.target; const list = [...InputVal]; list[index].service = value; setInputVal(list); };

[@mithilinamdar2783]

tNice tutorials really helped

[@user-yk5bq6zz9k]

this concept will not work ,if you remove item at index 0 , check out🤨🤨🤨🤨

[@goncalomoreira5273]

I’m so dumb for tNice tutorials