Checkbox user input with React App
For my final project with Flatiron school, I created a React app frontend combined with a Ruby on Rails API backend. I used a few new tools to expand my knowledge further. I implemented Material UI for the project’s styling and used the useContext hook rather than Redux to hold current user information and pass it around the application.
One of the more difficult ideas I implemented was the use of checkboxes. While that doesn’t sound too tricky, most of the tutorials I found merely used the true/false value of whether the boxes were checked or not, like “do you want to sign up to received emails? Check yes or no”. What I needed was the Boolean value along with the value of the item checked.
The boxes in this project were choices the user could pick of exercises they want to add to their workouts.
The exercises to choose from came from data users entered in a form on another part of the app. The first thing I did was create an array for state to hold whether the box was checked or not, the initial values were set to false.
Then, I initialized another state value for the created new workout.
In each checkbox input there is a ‘handle change’ event listener that takes the event and the index of that event. There is also a value with the id number of that exercise and a checked property that holds the index from the checked state array.
That information is passed to the handle change function which takes in the event and index. In this function, the name is easily set to ‘e.target.name’, the value however is a bit more complicated. I needed to first determine if the value input was a checkbox or not, if not it would set to ‘e.target.value’. If the input WAS a checkbox, then I would have to parse the value to an integer because the input came in as a string and I needed to be able to manipulate the value further down in the function as an integer.
Next, if the name was set as an ‘exercise_ids’ I mapped over the checked items, looked to see if the indexes matched, if they did not match, the item was not included, otherwise, it was. From that information, state was updated with the checked items.
After that (still inside the if statement if the name equals exercise_ids), I checked if the created new workout’s exercise_ids include the value variable held at the top of the function. If so, the new workout’s exercise_ids were filtered to return the ones not equal to the value set, they are then set in state.
All that along with the other user input are then sent to the backend with the handle submit function.
I am sure there are other ways to approach this problem, I’m open to alternate suggestions!
