Affix Radio Field with airSlate SignNow

Void checkbox field

hey what's up guys it's pedro here from new coder.com and in this tutorial we are going to be working with forms once again with functional components using the use state hook so we're going to be going over some more input fields so we're going to be going over drop down menus check boxes and radio inputs all right so to get started let's work with drop downs first so let us create a state for drop downs and what we are going to do is initialize this to apple so this is one of our options that we could pick from our drop down menu next let us head to our form we're going to print out the drop down state just for visual purposes so we'll say drop down value is and just output the state next let's go ahead and code our drop down menu so we use a select tag and we don't need any of these props so we'll just get rid of them and within here we could pass in our options so let's create an option and our first option we're going to pass a value prop of apple okay and we want to display apple to the user next all we need to do is make a couple of copies of this so our second option let's make it an orange and we need to change this value prop to orange within here we'll call this a banana and we'll change the display to banana all right so now what we want to do is make this a controlled component so control component is going to need a value prop and this value prop is going to be bounded to our state so we're just going to pass down the drop down state next we need a way to update this state so we have an onchange handler and this is just going to be a function which we're going to get the event object and within here we're just going to update the state so let's go ahead and call set drop down and we're going to pass whatever value the user has selected so we'll say e dot target dot value okay so this is why the value prop is important so this is how it's linked together all right so now let us go ahead and save this let's take a look at it in the browser and there you go so we initialize our state to apple so this is our default state drop down values apple if i click orange you see that our state changes so our onchange handler is being invoked and if i click banana you see that it keeps changing all right so that is drop down menus in a nutshell so now let us go ahead and move on to check boxes so let's come up here and create another state so i'll just call this is check and we'll say set is checked and let's go ahead and initialize this to false so now let's go ahead and go to our form let's go ahead and output the state so i'm just going to make a copy of that and we'll say check box is and we just can't output a boolean within these curly braces so we're gonna have to check to see if is checked is true then we'll just display true and if it isn't we'll display false next let's actually create our input so let's go ahead and create an empty line afterwards we're going to create a label and we'll get rid of this and what we'll display is check box next let's put our input underneath so we'll just say input and instead of text we're just going to pass in checkbox and we're gonna need to pass a couple more props so the first prop is instead of value checkbox uses something called checked and within here we're going to pass our state so this is going to make our checkbox input a controlled component like all control components we're going to need an onchange handler and this is going to take in a function and all we need to do is call our set is checked so we're going to update the state and instead of saying e dot target dot value for check boxes you would use checked all right so we let us go ahead and save take a look at it in the browser and there you go so we initialized it to false you see that up here if i click this check box we go true and false so our on change handler keeps getting invoked and our state is updating all right so that is a check box let us go into our final input which is radio buttons so let's go ahead and create our initial state so i'm just going to call this radio and let's use the apple orange banana example so we'll set the initial state to apple just like our drop down menu now from here let's come down to our form let's go ahead and make a copy of this and we'll say radio button is let's get rid of this and we'll just go ahead and output the state all right so now let us come here let's create a break just to give us some space first we're going to create a label and we'll get rid of that and within here we'll just display apple since this is our initial state next we're going to create our input and let's go ahead and remove that text and make it a radio button all right so now we're going to have to pass a couple more props so just like check boxes we pass a checked prop and this is going to be bounded to our state so in order to do that you would just check it to see if it is the current state so i'll just say if radio is equal to apple that means that this is the current button that has to be checked the next prop that we're going to pass in is the actual value so we're just going to set this to apple and the final prop since this is a controlled component is always the on change handler this is how we can update the state so this is going to be a function [Music] and we are just going to call set radio and within here we're just going to pass e dot target dot value and value is going to be whatever we passed in here as a prop okay so we're gonna need a couple of these so let's go ahead and make another break and i'm just gonna copy all this go ahead and paste this two more times all right so now we change apple to orange and we change this to orange and value to orange everything else stays the same and we do the same thing for banana all righty so now that that is out of the way let's go ahead and save this let's open up the web page and there you go so radio button is apple and that is our initial state if i click our on change handler gets invoked and it updates the state to the value prop all right so that is pretty much all i wanted to cover within this tutorial and i'll see you guys in the next one