Save Looker-on Checkbox with airSlate SignNow

Introduce checkbox notification

hey what's up guys it's pedro here from new coder.com and in this tutorial we are going to be going over check boxes so to get started let's give an initial state so a check box is either true or false so what we're gonna do is say is this person a citizen and we'll initialize this to false now if we come down here to our form let us display the state and since this is a boolean value we just can't stick in is citizen here because it's not going to show up so what we can do is test to see if is citizen is true what we are going to do is display yes and if it's not true we'll display no all right so let's just come up here and do some destructuring we're going to pull out is citizen from the state and now let's go ahead and create our input so first we're going to create a label for it and we'll get rid of that and our label is just going to ask are you a citizen next let's create our input and our input is going to be of type checkbox so let's just indent here we're going to pass in more props and the two props we need is the check prop so this prop is going to make this input a controlled component so we are just going to pass is citizen and every controlled component needs an onchange handler so we'll go ahead and pass an onchange handler as a prop as well all right so that looks good let's go ahead and create this on change method so we'll say on change we're going to take in the event object and within here we're going to say this dot set state and we're going to say is citizen and we're going to update it and usually when you're working with inputs you would say e dot target dot value but for check boxes instead of value you would just say checked okay and we'll see this behavior in a second so it looks like we have everything hooked up let's go ahead and save this let's bring up the web page and it says on change is not defined line 21 so always when working with classes don't forget the this keyword so go ahead and save this everything should be working now all right so are you a citizen this is the initial state we set it to false if i click this our on click handler gets invoked and it converts it to yes click it again yes no yes no yes no all right so the next question is what happens if i have multiple check boxes so let me just have a break here we are just going to copy this paste this here and this time we'll give another property here we'll say is over 21 and we'll initialize this to false...