Dynamically Create Input Fields in React, Using React-Hooks and React-Bootstrap.

hello guys welcome to another video on the code and youtube channel and in today's video i'll be showing us how we can create dynamic forms in react now in some real life situations users may need to create dynamic fields on a page that is extra fields and as a developer you may not be able to keep track of these fields except you create the form in a dynamic manner where they can probably click on a button that adds the extra fields and in some cases um remove some of the extra feed so that's what we're doing today so stay tuned as we get started before we start i would like you to please click on the like button for this video as well as click on the subscribe button this is one of the things that gets me going to create more awesome content for you guys so i would really really appreciate that if you can click on the subscribe button and also engage with the content i should also note that i created a telegram channel recently you can check the link to that channel in the description below i did this because i want to connect more with you guys so if you have any form of programming challenges or any questions you want to ask i'll be very glad to have you on board to ask those questions which i would gladly answer without wasting further time let's get right into it [Music] [Applause] in my vs visual studio code i already created a project and i'm going to just um create one single file and we'll call that file form.js form.js so we're going to generate a functional component with this what we need to do next is to install react bootstrap so i'm gonna head to the real bootstrap website so reacts bootstrap i'm gonna search for that on google then i click on the link to the real bootstrap page when we get there we can click on getting started and then so on the getting started page we can see that we have different ways in which we can install we can use npm install real bootstrap and then bootstrap but according to the documentation i think they said over here um the easiest way to install or to make use of bootstrap is through the cdn so what you can do is to copy this cdn link and then paste it in the other section of your um react application if i head over to my app now and i head over to the public directory and inside there if i go over to the index.html file you can see that i have a bootstrap cdn already pasted in there i already have this bootstrap cdn so i i don't need to do that again so if you haven't done that you can do that another thing you can see is the photons on um cdn link how do i get that if if i head over to um for the font awesome website i already have an account with them so inside my account i have access to a cdn so when i go over to my profile page i see somewhere on the sidebar that his phone's awesome cdn so it's this is where i was able to grab the cdn so i also have access to all the front awesome icons through this cdn link so that's the those are the two cdn links we need to set up this project so heading straight back to form.js i need to import some things from react bootstrap so one of the things i need to import is um the form and the column because we're going to be creating a form so let me also head back to the documentation and search for form so under the forms we have some boilerplates over there so i'll be making a reference one of them so you see these stacks we have a form form group um controls and things like that we need to import them from react bootstrap so that's what i'm going to do now so in my form.js i'm going to import form as well as call from react bootstrap another thing we need to import is the rule so to do that i'm going to type import row from react bootstraps four slash rule another thing is the container will make use of a container so i'm going to say imports container from react bootstrap for slash container and finally the next last thing we need to import is the button so import button from react bootstrap for slash button so i'm going to change this um variable over here so i'm going to change it to form page because it's clashing with the form we import we're importing from real bootstrap so i'll change this to form page home page now quickly let's now beat out the form so to do that i can create a container so let me create a container as well as a row so inside the row this is where we have our form so i can just go back to the documentation i will just copy this particular field up onto here so i'll copy that then i'll paste it in here so i need to close the form tag so for this to stop freaking out so we'll be having two fields just a few they'll be having the first name field as well as the last name field so let's edit that to our tastes over here we'll form form group inside the form group i'm gonna change this from email address to first name the type is gonna be type of text not email enter first name so i'm gonna remove this text over here then before i move forward i want to put this this form control form label inside the call it's inside the column so what i'm going to do is since i wrote a column so i'm going to create a row so the role is going to have imagine a class name a class theme of margin top i'm gonna give it imagine top of five so we also have a column so i will just have a column here so call it's gonna have um so the code i'm gonna give it an attribute of md so what i'll do is um i'm going to copy this down this column that contains the form label and the form control so the next set of fields we need to have is the last name so i'm going to change this first to last it's also going to be an input type of text and then finally we need to have a button so inside the button we're also going to have a call your column is also going to be inside the column so the button is kind of different we'll be having two buttons in fact so let me remove the form field so i'm going to have a button about here so i've brought in a button it's gonna instead of a default test it's going to have fonts awesome icon classes so i'm going to have the i tag then it's going to be a class name so the first one is the plus sign so i'm going to give it f e s f e dash plus the button is also itself is going to have some classes so the first class the okay it's going to have a class name of um margin top of four so i'm gonna duplicate this this down for the negative or the minus button so it's also going to have a margin top but this is going to be f a s f a minus so we also need to add this submit button although i think that's not really necessary since we're not submitting the form but we might just need let's create it for formality i'll just say button so inside the button we can have an input type of submit so i'm gonna have the variants of success and inside the button we have the send text so i think we've done a lot i i would like us to save this and see how it looks on the page so quickly let me run npm start npm starts and see how it looks on the browser okay we need to call these um exports in the app.css in the app.js rather so inside of here we import the tag or the components and then we'll refresh the page so there you have it we can see the page ball i think we still need to make some minor adjustments like the buttons are clustered together for some reasons so and the send button i don't like where it is um i just have to float that to the left hand side of the page so for the button let's first add a class to it so we can just add a margin right or five and for the send button you might need to add some default styles so i'll just say style is of course to open a brackets i'll say floats to the left so this is just normal css so let me save that and let's check if there is any difference on the page so i think this looks much more better so we have the first name field and the last name field now the next thing we need to do is to start writing the default functions that will add the button the extra fields and would also subtract the extra fields so to do that i'm going to make use of a new state hook in react so let's import that so i'm going to use state c u states so inside the use dates we can create two a very bunny function so the first one is going to be consts it's gonna the first one is gonna take in fields while the second one is gonna take in set fields and we'll say that to use states we make reference to these states and it's going to be in form of an array so inside this array each each form field is going to have an id so i'm trying to set some default value for the form so this the first one's gonna have an id why this second one is going to have uh first okay yeah it's gonna be inside an array of objects actually so that's why we're having this um thing freaking out so i need to add the brackets over here so i think the error should be gone now now the second one should have the first name first name it's gonna be an empty string and finally the second field or the last video is called the last name it's gonna also have an empty string so this is the very first step towards creating a dynamic form defining what's the requirement for each fields will be so they are both having smc string so so the next thing we need to do nice to look to our form so let me quickly do that to do that i'm going to open a bracket because this is jsx it allows us to write javascript in html so just below the form.group here i'm going to open yeah i'm going to say fields dot map i'm trying to look through the map variable we created above so i'll save fields map then it's going to take in a variable called field and as well as another variable called i so we we have an arrow over here so let me just cut this out and then close it up here just above the form dot group so we don't have any errors while doing that so then we need to create a div because um of uh in reacts reaction cards also have some parents agreements to take in some key so what i mean is i'm gonna have something like this this will prevent react this will operate track each of the um the current number of fields we have on the page when we look through the page so i'm going to have something called field.id so i'm also going to close it up yeah i think that's all so let me save and see if you have any form of error on the page let me open the console also so there are no errors in the console which is great so now we can now start creating our functions so the first function i want to create is the unchanged events from event handler so first i would like to give this form some a name so this is last name so i'll say last name last name then i can also give it a value called value is also an attribute to get the values of the form field so i'll just say field dots last name and finally we can create the unchanged event handler so i'll just say on change is equals to so the name of the variable inside the investment i'm going to call undo change inputs this will post track the values of the form as they change it's going to take in two variables also so let me copy these three and then i'll paste it in the first name part of the field so i'll change this to first name so field dots this will be filled out first name so we can't save this now because if we do we haven't created this variable yet so this thing is going to freak out with some errors so let's click create the variable wire remember we are looking through the fields to get access to these values over here the first name and the last name so to create a variable for the undo input change or is the under change input recording so i'm going to say const undo change input is equals to the two variables we created inside of the form so i'm going to have an error function this will help us create keep track of the of the values of the form like i said earlier so inside of here i can just um create a variable called values cos values is equals to we spread the fields variable in the u states we created above so this would be f e l d f field i can't spell properly so [Music] inside the field we can now see values values make reference to the variable we created above or the parameter inside of the function and then set it to the events.target.name which is going to be events.target dot value before we now finally call the set fields here and then pass in the values variable which now has the value of the field as the change so to get an idea of what we are doing here we need to console.log something and what we need to console.log is the event.target.name just to see the values of the field as we type into the input box so event.target.name so i'm going to save that and then head back to the browser and wait for the page to reload so we have an error here on line 17 set field is not defined let's confirm what they mean by that field is not defined okay it's supposed to be fields not field so let me save that and see if the error gets corrected okay think we're good to go now let me type something inside the first name let me type my name d e j i okay we need to get the value actually not even dots let me make it vendor target.value value and save so let's try it again so when i type in my name d e j i so you can see my name and then when i type in my last name a d e s o g a so we can see that we can now get access to the values i think we've gone we've we've achieved uh one major step here so now what we need to do is to create the handle the the functions are under the adding of the field and then the subtraction of the field so let's quickly do that now let's start with the undo add so i'm going to create a variable called constantly add sounds red i guess so it's going to take in an id so inside these functions we're going to have a set fields which we have in our use dates so inside the says field we are also going to spread in the fields variable and then inside the fields variable we are going to [Music] append the id remember it's everything inside the array we have an area of id last name our first name or first name and last name and that's order so i'm gonna have id i'm gonna because i want to increment the value of the id as we add more fields so i'm gonna say id plus two and then we're gonna set in the first name because anytime we create a new field we don't have it we don't want it to have any form of variables so it's gonna be an empty string also when we add a new field and same thing with the last name it's going to be an empty string so this function will help us to add fields to the page so the next function we need to create is the subtract um variable of the subtract function so i'm going to quickly do const undo subtract or minus so inside the subtracts is also going to take in a a parameter called i so inside of here we will have a variable called values so cons values is equals to the values of the fields we spread out in this then we're going to make use of the dot splice here splice is a javascript method that helps us to modify an array by removing elements from the array so i'm going to say va values dot splice we just want to remove one so i'm just i'm just going to say i that signifies for one to be removed anytime we click the negative um button so i'm just going to set the fields once again set fields and it's going to take in the values the new values of the removed field so spread out in the values so now that we've created the [Music] and the variables we need to append them to the buttons we created below so the first one is the undo add so i'm going to copy this undo add and i'm going to add red over to the button that says that has the fa plus icon so here i'm going to have an on click invert event and lasso i will say on click is because we have an anonymous function anonymous error function and it's going to have the undo add i'm passing the parameter which is i same thing needs to be applied to the undo subtract so i'm gonna just gonna copy this and add event handler i'm gonna paste it here so let me just instead of typing it out let me copy this and then paste this here and the subtract it's also going to take in a parameter called i so i think we can test this out now i think it should work so let me save and let's see if it's going to work at the very first attempt so let me add a field whoa as we can see we we have the ability to add fields and also to subtract field so there's one more thing i noticed over here um i think if i click on this minus all that fuse will disappear i don't want this to happen so to prevent that i'm going to disable the handle subtract button at that initial state so what i can do is i'll make use of a disabled attribute disabled is equals to we'll say when the field dot id when it is equals to one we want the field to be disabled let's see if this works out whatever we want so we save and then we see that this particular negative button is disabled adjusted at least we always have a few there so if i type in anything here and then i add in a new field you'll see that it's enabled back so it's kind of make it um realistic in a reward situation because you wouldn't want to take away all your forms in a reward situation now the final thing i want us to do is to get the values of this form as we type it on the page at least to see some of the values instead of logging into the console and because we're not submitting it to any form of backend api um what we're gonna do is to normally using jsx we might just need to open a bracket and probably type in fields of last name because our values here arrays we need to map over them we need to look through them so to look through them i'm going to say fields.map i'm going to create another variable called field and we're going to have an arrow so inside this arrow i'm going to have a parent fragment to avoid any form of errors because relax reacts by default likes to freak out when it doesn't have parent elements so i'm going to create a div inside this div we're gonna have a class name called we're gonna give it a margin of five so inside this div we can now have the values of each of our fields so the first one i want us to have is field dot id so field dot id i'm gonna close that let me just copy this down twice so few dot id fields first name first name and finally field dot last name so i'm going to save that and then let's see let me close this console and refresh the page so we see by default we have one because that's what we have over here by default our id takes in an id of one but when we add a new field we're gonna take the id is gonna increment by two because we have two fields when we add the third one is gonna be three one by the fourth one's gonna be four so if i add values to value if i say my curl when so we get the value for one as michael owen then the second one if i say brad travis c travis c you see we have brought traffic second if i say gary simon there is simon see we have where simon has the third one the photon kind of breaks over here so i we don't need to add another shaft so i'm going to remove that so we have the first one michael owen brought travis younger and simon so if i remove or add it's going to reflect over here as this stage changes so the in situations like this you want to send it to the back and you already have the values to this each of these fields it's going to be in an area of objects just like we set it in the in the form state so i think that's all we need for this video make sure you like and subscribe click on the notification bell i would really really appreciate that so i think that would be all for this video thank you very much for watching if you have any questions please put it in the comment section i'll be glad to hear from you guys thank you very much for staying tuned and i will see you again next time

Channel: The Code Angle

Views: 4,853

Keywords: react tutorial, web development, react hooks, front end, bootstrap 5, bootstrap, bootstrap tutorial for beginners, react bootstrap, react bootstrap tutorial, programming, coding, coding for beginners, web design, javascript, javascript tutorial, react tutorial for beginners, Dynamically Create Input Fields in React, Using React-Hooks and React-Bootstrap., Create Dynamic Form Fields in React, Build a dynamic form in React

Id: G0bxaEVWtt8

Length: 29min 42sec (1782 seconds)

Published: Sat Jun 19 2021