Add or remove input fields dynamically with React

Add or remove input fields dynamically with React

List of points.
- Create react application
- Design the simple form
- Write logic for a single form
- Implement logic for multiple fields
- Handle event to add or remove fields

To create react app using create-react-app

DOCUMENTATION:

NEWSLETTER:

FOLLOW US:

Don't forget to subscribe! Really appreciate it!

#reactjs #dynamicinput #addremoveinput #cluemediator

[maltegb]

Spotless coding here, thx! You deserve much more followers!

[sudarshan_savvy]

I must say bro...you nailed it, and gained a lifetime subscriber.

[RaviPatel-rizv]

This is very Good Video. Exactly what I wanted to achieve. Very well explained. Thank you very much. Please keep creating such videos.

[kabirpathakelitmus]

Great video! Please keep posting such amazing content!

[dhruvishabansal]

So simple explaination. Understood everything. Thank you so much :)

[JustDream]

Could you tell me how dynamic input fields ( using react-redux) are stored in MongoDB using node js?

[kristinajoycegob]

Can you also do a part 2 for submit button? Where you will need to submit the data from the fields

[davidmtz]

Hey man! Awesome video, it really nailed exactly what I was looking for. BUT I'm having a bit of trouble when using a custom Input component. For example:
const InputField = (props) => {
return <input {...props} />
}

whenever I remove a field, the state remains correct as expected, but the inputs display values as if I removed the last one only, like so:

Input 1
Input 2
Input 3

state: {1, 2, 3}

REMOVE Input 2 results with
Input 1
Input 2

state: {1, 3}

Anyone know what is going on???

[panduananto]

hey, thanks for the excellent tutorial.

i have a problem when I implemented the input inside a <form> element. when I have more than two input element I can only click remove from the last input element, but if I click the remove button for example in the second input element then the <form> element is immediately submitting, can you help me with that, thanks.

[jjhy]

Great explanation, can you do part 2, i have little concern cause, after adding row if you refresh the page its gone, how can i handle that, it should remove if i click the remove button, tnx

[RajaKishore]

will it work for one select drop down and two input fields when i worked on <DropdownList
name="rule"
dropUp
data={kbruleList}

/> its not working

[jagadeswaran]

Hi, Thanks for the video... Can you let me know how to add/delete a tree view data

[rajdipchauhan]

Great explanation Clue ! To the point and straight forward to understand. Keep posting such a good videos.

[MoDDingMS]

Thanks exactly what I'm searching for!

[alaeddinejmila]

This was a great deal of help, Thank you so much, very appreciated!

[rahulb]

thank you for your tutorial, how would I know save the inputted values to a firebase database? If you could guide me to wheee I can find how to do this that would be amazing thank you.

[vasukichezhiyan]

I'm getting unsafecomponentdidmount warning asking me to move code with side-effects to componentdidmount

[krishnakalyana]

im facing a problem where the input looses focus when i type a single character

[amansahu]

Thank you so much brother, this is the same thing for which i was looking.
Good explanation.
Keep up the good work

[ams]

Hi. Could you advise how to validate the new fields added to the form with Joi?