Copy Byline Radio Button with airSlate SignNow

Add electronically signing radio button

hey what's up guys it's pedro here from new coder.com and in this tutorial we are going to be talking about radio buttons all right so to get started we're going to have one state property and this state property is going to be the initial value so we are just going to set this to odin for example next let's come down to our form let's give us a header and this is just going to display the current value so we'll say current value is and we'll just display values so let's come up here and do some destructuring so we're going to pull out value from the state and that looks good so now let's come down here we're gonna have two radio buttons to start off with so let's go ahead and create a label let's delete this html4 and this label is just going to say odin now underneath here we're actually going to have our radio button so go ahead and delete that text and let's put in radio now what i want to do is pass a value prop so we're just going to say value and we're just going to set this to odin and we'll pass in one more prop the on change handler so we'll pass in on change so we haven't created this yet but we will so i'm just going to say this dot on change all right so let's go ahead and make another radio button out of this let's copy this now let's go ahead and paste this down here and instead of odin let's say thor and we'll give this a value of thor now let's actually create this on change function so we'll come up here and we'll say on change we're going to get back the event object and this is just going to have a setter so we'll say this dot set state and we're going to update the value to whatever the user selected so to get the current value we're going to say e dot target dot value so now this isn't going to work exactly as we predicted but i want to show you why it's not working so let's go ahead and save this and let's open it up within a browser alright so we have our header here and we have these two buttons so if i go ahead and click thor you might say hey this is working i click door and the on change handler is being fired off and the state is being updated to thor now if i click odin same thing it recognizes that there has been a change the on change handler gets fired off and the state gets updated to odin but now if i click thor again you notice it's no longer updating and this is because we're not keeping track to see if these radio buttons have been clicked already so if i just refresh this you can even see that odin isn't even highlighted and we set this to our initial value so how can i make sure that the state of these radio buttons being checked gets updated accordingly so our on change handler gets fired off so what i could do is we could pass another prop called checked and checked accepts a boolean now you can pass true you can't pass false but what we want to do is if the current value matches the value of our radio button we want it to be displayed as checked and if it isn't we don't want it to be displayed as checked so how can we do this dynamically well we pulled out value from our state so first we'll check the value and we'll say if the value is equal to what the radio buttons value is so in this case it's odin so odin here and the value of this radio button is odin and we set that to our checked prop so this is going to get evaluated to either true or false so we do the same thing for door let's go ahead and copy this let's paste this here and we'll set this to door now if i go ahead and save this we should get the desired output so now you see that odin is highlighted accordingly and if i click thor you see that odin is no longer highlighted and that the state is now thor click odin now you see that is working perfectly fine so i could go back and forth no problem so you must keep track of the state of whether or not the radio button is checked or not and you should do this dynamically so you just test to see if the state value is equal to the value of the radio button in order to accomplish this so now let's say that we have another group of radio buttons within our form so right now we only have one group so this is fine but let's have another group so i'm just gonna copy this i'm gonna paste this here paste this again and this time we're gonna have zeus and this is gonna be a value of zeus change this to zeus and we're gonna do the same thing for here we'll change this to hercules and i think that's how you spell hercules i'm not sure but it's not gonna matter and let's come up here and let's give us a couple of breaks all right so what is the problem that i want to solve so let's go ahead and save this let us take a look at this in the web page so here we have odin thor zeus hercules so if i click door works zeus works hercules works now this is not the desired output what i want is odin and thor to be by themself their own group so in other words i want you to be able to choose between odin and thor and the second group zeus and hercules i want you to choose between zeus and hercules all right so i don't want this type of behavior so what i can do is not think about it we're going to change value and actually just to save some typing i'm going to leave value and we're going to have a state property just for zeus and hercules so we're just going to say value to and we'll initialize this to zeus okay so now what the problem is is right now in order to solve our problem uh one way we could do this is to create a different on change handler for zeus and hercules right and then we just basically copy this handler and we set value to value 2 and it works perfectly fine but instead of having two different on change handlers we could combine this into one so in order to do that let's actually destructure from our state so we're gonna pull out value two let's go ahead and make a copy of this and we'll say the current value two is value two and let me just copy this and we're gonna come down to zeus and hercules and within our checked instead of value because value is going to belong to odin and thor we'll change this to value 2 and we'll change this to value too okay so what do we have left to do is we gotta fix this on change method so we just can't hard code value what we can use is computed property names so i could say square brackets like this and then within here i'll say e dot target dot name now we need to pass a prop called name to our inputs so i'm going to come down here and this name prop should match whatever your state is so this name should match value and value is going to represent odin and thor group okay so we'll add this to odin and we'll go ahead and add this to thor now i want to create a different group so zeus and hercules needs their own name prop and we named it value two so let's copy that pass in a name and we'll set that to value two and do the same for hercules so now if i just come back here if you don't get this part we're just using the name prop and this is going to dynamically get whatever property that we want to update so if if i'm messing with odin and thor the value state will update if i'm messing with zeus and hercules value 2 will get updated so we could just use one on change handler so to prove this let's go ahead and save this let's go ahead and bring up the web page so now you can see that zeus since value 2 is initialized to zeus is checked so if i change thor odin that works perfectly fine for value and zeus and hercules is its own group so if you want to separate your radio buttons into groups just use the name prop alrighty so that is pretty much all i wanted to cover within this tutorial and i'll see you guys in the next one