How to get multiple checkbox values in React JS, set the min and max selection limits for checkboxes

hey guys today I want to show you how to get multiple checkbox values in reactjs we will also add a code that will require user to select minimum number of checkboxes and set up the maximum number of options they can pick which is very common requirement in real life this is our final output that you will have after finishing this video here you can see five check boxes with minimum selection set up to two and maximum set up to four if user selects three they can submit it and result will print out to the console if user selects one they get this popup message and when user tries to select more than four they also get a pop-up window saying only four options are allowed and in this case they are not able to submit it so let's start I'm starting with clean react project and use bootstrap for styling if you don't know how to set it up I recorded a separate video on this topic which I'm linking in the description here let's create new Javascript file and import react we will start by defining a constant here with all our checkboxes data in Json format and then write our main function let's call it checkbox selection this function will render a form that will include our checkboxes I will use this bootstrap class to center it and let's name the header select options our checkboxes will render based on the data in the checkboxes array which we just defined this expression means we will iterate over the checkbox data array using the map method and for each checkbox present in an array we will generate this code with type and label displayed we will also render a submit button which in our case will print the selection to a console we'll Define this behavior in a second so that's our visuals if you go to local window now you can see everything looks great but it's not interactive you can check and uncheck boxes and click submit button but nothing happens now we'll write a code so users can interact with our form to control behavior of our checkboxes we'll use use State react hook as our mission here is to capture the state of the selection after each and every checkbox change so if user checks or unchecks the Box you want to capture this activity we'll have two variables here we'll use selected items variable which will store the current state and set selected items variable that will be capturing the changes to the current state and the initial state will be an empty array which means no checkboxes are selected now it's time to Define what happens when user clicks on the checkbox each time user clicks we want to capture the value which is the label of the checkbox so option one 2 three four or five this is called Target value there are two scenarios here when user clicks the checkbox they either check or uncheck the box so we need to Define two behaviors and we will use if statement to do it when user checks that box we will add the target value to our array so set selected items will add the value to the current state which is defined by selected items so for instance if our initial state is an empty array and the user selects option one our current state will become an nner with a single element which is option one if the user subsequently selects option two the initial state which started as a single element array containing option one will be updated resulting into two array element option one and option two on the other hand when user unchecks the Box we will remove the item from our array by filtering it out we will add the method that we just wrote to unchange prop for our checkbox component this way every checkbox will have this Behavior now we are ready to Define behavior for our submit button first let's add a prevent default function here to prevent page overloading you can see that currently when submitting our page reloads and we don't want it here and other than that it will be pretty simple we will just print the result to a console let's print our selected values and the number of options chosen as well which is the length of the array and obviously we need to add this method to our form now when we go to our local window we can see we are able to select any number of checkboxes and submit it successfully all right so now let's imagine that we have a requirement to set minimum required and maximum allowed selection here so for example we want to force the user to submit at least two but not more than four options this can be done pretty easily we will Define a constant with minimum and maximum selection above our main function minimum will set to two maximum we're going to set to four and now we need to alter our handle checkbox change and our handle submit code a little bit so let's think about it first minimum selection will only matter on submit the checkbox behavior will not change based on this limitation why because we don't want user to be able to submit if minimum is not met on the other hand maximum selection will not matter on submit but it will matter when user clicks the checkbox because we don't want the user to check the box in the first place if they go over the certain limit so we need to program this behavior let's start with minimum selection I will add a condition in handle submit that if my array length is less than minimum selection we will show the alert to a user and if not we'll print selection to a console like we did before and that's it for minimum selection for our maximum limit like we already said it will only matter for how we are handling checkbox change if we reach maximum options checked already we don't want user to be able to check a box anymore and we want to inform them about this fact so I'm adding additional condition under if checkbox is checked as it's triggered when user tries to check the box and my condition will state if the maximum selection is reached print an alert similarly to what we we did in handle submit and additionally uncheck the Box we also need to do empty return statement here to exit function otherwise our code will go straight to adding the checkbox to a r which is the next step and for unchecking Behavior the code stays the same okay guys I hope it makes sense let's check out the final result let's try to submit one selection first you can see we get the alert about required minimum when I select two I'm able to submit when I try to check all of the boxes I get the alert that we reach the maximum limit and I'm able to submit four check boxes which is correct so all looks good

Channel: Code With Katia

Views: 2,162

Keywords:

Id: YTE2YcBR098

Length: 8min 47sec (527 seconds)

Published: Sun Oct 08 2023