Dynamically Add Two Input Field When Button Click in React Js

Dynamically Add Two Input Field When Button Click in React Js
To add two input fields when a button is clicked in React, you create a button that, when clicked, updates the state to include additional input fields. The state holds an array or list of input field configurations, and the component renders input fields based on this state. The button's click handler modifies the state to add new entries, which triggers a re-render to show the new input fields
code : github.com/Aka...
#react #addinputbuttonclick

[@sanketgole4199]

This type of videos really helpful for us bro to improve programming logic

[@codingcomics]

Yes. Keep learn

[@SatpalSingh-pz9xx]

why clicking delete button deletes the last row of input fields?

[@codingcomics]

If you want to hide the delete button when you have only one field, then add this code. Check { data.length > 1 ? handleDelete(i)}>Delete : "" }

[@SatpalSingh-pz9xx]

@@codingcomics thank you for replying, you got one subscriber

[@SatpalSingh-pz9xx]

@@codingcomics actually the problem I am facing seems so wierd.... using add button I created three rows(each row contains input fields fname and lname) and I added values like a,b,c,d,e,f respectively in each input field. When I delete middle row then c,d should be deleted and a,b,e,f should remain. But in my case a,b,c,d remains and last row(e,f) gets deleted. When I checked the inputList value which is being mapped over after each render , after deleting the object list is like [{"fname": "a" , "lname": "b" },{"fname": "e" ,"lname": "f" }], which is correct, but why is it not being mapped over correctly after updating the list using setInputList()?

[@codingcomics]

I've provided the code link in the video description. Please compare that code to your code. If the issue isn't resolved, feel free to share your problem, and I'll do my best to help.

[@shreyashukla4764]

@@SatpalSingh-pz9xx i am also facing same issue @codingcomics

[@velioona9835]

wow this man save my life, thank you mate

[@roshanbhatt5853]

Thanks for making this video but I have one more issue and that is what ever values we saved from this dynamically created control, I need to get it back and re populate into same control from db so how can I do it please help

[@Vishalsaini-mn1nj]

Thank you sir for helping us, definitely going to use this in my project 😊

[@chuuuuuuuuucu]

thank you very much for sharing

[@jiaxin5230]

thanks for your sharing

[@RaviAdhav]

very helpful thanks

[@huywarrior]

thanks! U're best!

[@Infinitegameplay007]

Thanx bro

[@roshanbhatt5853]

Thank you🎉

[@ajimattar9101]

Hi, How to limit number or rows and disable add button if rows are exceeded

[@codingcomics]

1. initialize one state as zero. 2. inside add button increment the state value. 3. inside remove function decrement the state value. 4. inside button add like this =6}>add button will be disabled

[@ananthakrishnankrishnan7287]

Thanks for this helpful video. I need the dynamic field to be react select combos, is it the same logic? How do I extract the data from combos into a json string to pass to server?

[@codingcomics]

Yes. You can do same logic what I did. You will get array of object format

[@ananthakrishnankrishnan7287]

@@codingcomics One last question, how do I load up the combo boxes with data from the server? How do I feed the object data to render the correct number of combo boxes depending on how many time add was clicked and data was added? Thanks for the help!

[@ashvarygidian1996]

Thank YOU .

[@salaheldin9140]

hello, sir can i contact you because i have a problem in the same project

[@codingcomics]

Yes. Ping me in Instagram

[@salaheldin9140]

@@codingcomics i send to you a message