Check Yourself: Populated Forms and Checkboxes

Last week, I reviewed what I had learned about using Formik when building various forms for my project. As I’ve continued to work on my project and worked more with Formik, I began experimenting with edit forms that are populated with user information from props. This week, I’m going to share how I managed to display data for checkboxes HTML elements.

When working with forms, it is pretty reasonable to make the connection that creating a profile or adding a job leads to needing a page to edit the information. It is fairly easy to develop as most of the code will remain the same, the only difference is the need to populate the information as values in the form. This is pretty straightforward when working with text boxes as the values are set to the corresponding input element.

<FloatingLabel label="Title">
    <Form.Control type="text" name="title" value={formik.initialValues.title} onChange={formik.handleChange}</FloatingLabel>
<FloatingLabel label="City">
    <Form.Control type="text" name="city" value={formik.initialValues.city} onChange={formik.handleChange} />
</FloatingLabel>
<FloatingLabel label="State">
     <Form.Control type="text" name="state" value={formik.initialValues.state} onChange={formik.handleChange} />
</FloatingLabel>
<FloatingLabel label="ZipCode">
    <Form.Control type="text" name="zipcode" value={formik.initialValues.zipcode} onChange={formik.handleChange} />
</FloatingLabel>

This can become slightly more challenging when working with different elements like checkboxes, radios or select elements. As a quick refresher, checkboxes can be used when multiple inputs can be inserted into a table column, very simple when working with the original add form. For a checkbox to be pre-selected when it is displayed on the user interface, the checked attribute must be inserted into the element. Originally, I thought I would have to write out every single element with the differing value, and specify that it should be checked if it matches the values provided, in this case by props.

<Form.Check name="jobType" label="Part-Time" value="PT" id={`inline-checkbox-2`} onChange={formik.handleChange} defaultChecked={formik.values.jobtype}/> 
<Form.Check name="jobType" label="Contract" value="Contract" id={`inline-checkbox-3`} onChange={formik.handleChange} defaultChecked={formik.values.jobtype}/>
<Form.Check name="jobType" label="Temporary" value="Temporary" id={`inline-checkbox-4`} onChange={formik.handleChange} defaultChecked={formik.values.jobtype}/>

I figured there must be a more efficient or DRYer way to write this code, so I approached it by iterating through the proposed values and mapping out the elements. This is a very similar approach to displaying employees or jobs without repeating code. Except this required I define the different values as a constant at the top of the component.

const jobtypes = [
  "Full Time",
  "Part Time",
  "Contract",
  "Temporary"
    ]

Honestly, it didn’t minimize my code but it looked slightly neater. The most important aspect of writing code this way was allowing me to select checkboxes that matched a job’s values. defaultChecked expects a boolean value to define its checked status, therefore if the values includes the value of the checkbox, it will return true.

{jobtypes.map(job => 
  <Form.Check name="jobType" label={job} value={job} id={job} onChange={formik.handleChange} defaultChecked={formik.values.jobtype.includes(job)}/>
                )}

As always, it took some time perusing on the internet for a solution, but most importantly it was my persistence and attempting to think outside the box to solve it. Now I will be able to apply the same concepts to other edit forms for this project and future projects to come. The key to learning and growing as a developer is to keep an open-mind when developing a web page and to keep plugging away until you have that eureka moment. They can happen daily if you stick with it.