Create Dynamic Form Fields in React

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.

Support The Channel:

🌎 Find Me Here:

––––––––––––––––––––––––––––––
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
––––––––––––––––––––––––––––––

#dynamicForm #React #enjoyCoding

[xxfce]

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 :)

[khandoor]

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

[Bluesmile]

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

[yemmeth]

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

[ajaybedre]

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

[mewsnetics]

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

[nijarshrestha]

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

[mikealejandro]

Broh, this was dope, you the greatest !

[MrJacques]

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

[malshamadushani]

This is a great tutorial! Well explained.

[durgeshjhalwa]

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

[joaquinpettinari]

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

[Human_Evolution-]

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

[rohittewari]

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

[maingocdieptran]

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

[giantqtipz]

This is a pretty easy to follow tutorial

[DidYouKnowThis.]

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

[gourabpaul]

you are a lifesaver, I cant thank you enough.

[tuna]

I appreciate you bro , you saved my time.

[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