I’ve still been working hard on building the website for my client, including adding some design and structure to the interface with React-Bootstrap. I ventured into uncharted territory when I began using Modals for my forms and stumbled upon Formik, a React component that helps minimize the amount of work needed to construct forms. Continuing the theme from the past couple weeks, I thought I’d share some of the techniques I learned while working with these formats.
Since I was first commissioned to develop the website, I’ve been thinking of different ideas I could apply to the interface, including having the login/signup window be a popup. I had encountered this interactive element many times in the past, and I always found it modern and stylistic. Until last week, I was completely unaware that this was referred to as a Modal element, (learned it from an assessment of all places.)
Now that I knew what the element was named, I quickly remembered seeing it on the list of components available through React-Bootstrap, the React version of the popular design framework. Honestly, I haven’t had too much experience with other design frameworks like SASS but I found Bootstrap to be fairly simple to implement and easily reconfigures the user interface to look more professional.
I thought the form for my multi-page questionnaire would be perfect chance to use the Modal element. To start, I created a main page that would house my basic functions (onChange, onSubmit) along with my state, including keeping track of what page of the questionnaire the user was on. Then I included the different components that would render depending on the progress in the questionnaire, Basic, Desired Schedule and Skills entry, along with the necessary props.
<Form onSubmit={handleSubmit}>
<Basic
currentStep={state.currentStep}
handleChange={handleChange}
show={state.show}
fname={state.fname}
lname={state.lname}
city={state.city}
state={state.state}
handleClick={handleClick}
/>
<Desired
currentStep={state.currentStep}
handleChange={handleChange}
show={state.show}
jobType={state.jobType}
schedule={state.schedule}
handleClick={handleClick}
/>
<Skills
currentStep={state.currentStep}
handleChange={handleChange}
show={state.show}
skills={state.skills}
handleClick={handleClick}
handleSkills={handleSkills}
handleSubmit={formik.handleSubmit}
/>
</Form>
Inside of each individual component was React.Fragment to define that it part of a larger component, and the Modal element that includes a Header, Body, and Footer. The Modal element also comes along with some default features including show (default value is true which is necessary to show the element), animation to give it a little flare when it pops up and backdrop to fade out the page behind the Modal. Inside the Modal.Body included the form, also using the Form element supplied by React-Bootstrap.
if(props.currentStep !== 1) {
return null
}
return(
<React.Fragment>
<Modal show animation backdrop>
<Modal.Header>
<Modal.Title><img src="/images/blucollar_icon.png" alt="Collar" /></Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Label htmlFor="first name">First Name: </Form.Label>
<Form.Control type="text" name="fname" onChange={props.handleChange} />
<Form.Label htmlFor="last name">Last Name: </Form.Label>
<Form.Control type="text" name="lname" onChange={props.handleChange} />
<Form.Label htmlFor="city">City: </Form.Label>
<Form.Control type="text" name="city" onChange={props.handleChange} />
<Form.Label htmlFor="state">State: </Form.Label>
<Form.Control type="text" name="state" onChange={props.handleChange} />
<Form.Label htmlFor="zipcode">Zipcode: </Form.Label>
<Form.Control type="text" name="zipcode" onChange={props.handleChange} />
<Form.Check type="checkbox" name="license" label="Driver's License" onChange={props.handleChange} />
</Modal.Body>
<Modal.Footer>
<Button variant="primary" name="next" onClick={props.handleClick}>
Next
</Button>
</Modal.Footer>
</Modal>
</React.Fragment>
)
While researching using different input types with Form on React-Bootstrap, the documentation included a recommendation to use Formik to, again, help lessen the amount of code or redundancy when building forms. Needing to use anything that will help me construct the website faster and smoother, I decided this was a perfect opportunity to learn and utilize the React supplement.
The most appealing aspect about working with Formik is it is preset with most methods needed to handle updating state and handling fetch requests with said state. Every form I’ve written has included a handleChange and handleSubmit methods, mostly the same functions written over and over again. With Formik, I only have to define what happens when the submit button is clicked and the rest is handled with the included Formik methods that are easily passed as props to the various questionnaire components. This helps clear up a lot of space and will help shorten the time needed to build out forms.
<Form onSubmit={formik.handleSubmit}>
<Basic
currentStep={state.currentStep}
handleChange={formik.handleChange}
show={state.show}
fname={formik.initialValues.fname}
lname={formik.initialValues.lname}
city={formik.initialValues.city}
state={formik.initialValues.state}
education={formik.initialValues.education}
handleClick={handleClick}
/>
<Desired
currentStep={state.currentStep}
handleChange={formik.handleChange}
show={state.show}
jobType={formik.initialValues.jobType}
schedule={formik.initialValues.schedule}
minpay={formik.initialValues.minpay}
maxpay={formik.initialValues.maxpay}
handleClick={handleClick}
/>
<Skills
currentStep={state.currentStep}
handleChange={formik.handleChange}
show={state.show}
skills={formik.initialValues.skills}
certificates={formik.certificates}
handleClick={handleClick}
handleSkills={handleSkills}
handleSubmit={formik.handleSubmit}
/>
</Form>
After I completed my seamless and slick questionnaire, I updated my signin and signup methods with Modal and Formik to update the interface with style. The website is slowly coming along and I’m happy with the progress I’ve made so far. I’m even more excited for the potential to learn other supplements and tricks when building a website. Until next time!
Top comments (0)