DEV Community: Malissa Bishop

How to create better forms in react: with Formik and Yup.

Malissa Bishop — Wed, 12 Jan 2022 20:17:21 +0000

What is Formik?

Formik is an open source library that allows us to deal with forms in React; without the headache. Usually, a form in react involves repetition and can cause an annoyance of errors, keeping track of values, and handling submissions. This makes getting data in and out of forms quite taxing. With Formik, we're able to spend less time dealing with state and onChange submissions.
Note: As a prerequisite, a basic understanding of React and some knowledge about forms is required.

What is Yup?

Forms are key in collecting data from users as they navigate and interact with our applications. In order to ensure this is done accurately and efficiently, we utilize form validation. This is where Yup comes in, a library that structures the expected data from the user and allows us to dictate if it's required or not. It helps us create custom validation rules, so we don't have to write them out from scratch. Later on in the article, we'll go into depth about how this actually works.

Follow along in your code editor so you can visually see the differences, and practice with forms of your own.

Install.

Now that we have an understanding of Formik and Yup, lets install them in our terminals, so we can start using them.

// with npm
npm install --save formik yup

// with yarn
yarn add formik
yarn add yup

First things first, we'll create an app within the terminal, cd into it, and run 'npm start', so that we're able to see our app in the browser.

npx create-react-app my-app
cd my-app
npm start

React Forms Vs. Formik & Yup

Below we'll see the use of React forms without Formik and Yup. So, I created a sign up form that requests the first name of a user. As a user types into the form, we want to store the data in our local state. We would have to implement useState and an onChange function, to capture what the user types into the form. In order to see this happening we can place a console.log of the 'firstName' and see the keystrokes as we type in our console.

import { React, useState } from 'react';


export default function SignupForm() {

    const [firstName, setFirstName] = useState("")
    const [lastName, setLastName] = useState("")
    console.log(firstName)

    return (
        <form>
            <div className='input-container'>
                <input 
                    id="firstName"
                    name="firstName"
                    type="text"
                    placeholder="First Name"
                    onChange={(e) => setFirstName(e.target.value)}
                    value={firstName}
                />
            </div>
<div className='input-container'>
                <input 
                    id="lastName"
                    name="lastName"
                    type="text"
                    placeholder="Last Name"
                    onChange={(e) => setLastName(e.target.value)}
                    value={lastName}
                />
            </div>
        </form>
    )
}

Now imagine we needed more than just a first name, like a user's billing information or an entire survey. This can start to become daunting, as we would have to build out a 'useState' for each and every piece of information we're requesting from the user.

Formik & Yup to the rescue!

In order to use Formik, we have to import the hook. This is done in the same manner as 'useState'. We then declare a constant and set it equal to 'useFormik'. We set our initial values to empty strings; the name given to each key must match the value of the name we set in the input field. Formik has a built in 'handleChange' function to capture any change in data input; therefore, we are able to get rid of the 'onChange' arrow functions. We utilize dot notation 'formik.value' and attach whatever the key value represents. Handling submissions is also done with ease, as we create an 'onSubmit' function and place it within the form. This will handle what happens after the user submits, and will only run when there are no errors. This makes our code less verbose and more scalable.


import { useFormik } from 'formik';
import * as Yup from 'yup';


export default function SignupForm() {


    const formik = useFormik({
        initialValues: {
            firstName: "",
            lastName: ""
        },
        validationSchema: Yup.object({
            firstName: Yup.string()
            .max(2, "Must be 2 characters or less")
            .required("Required"),
            lastName: Yup.string()
            .min(10, "Must be 10 characters or more")
            .required("Required")
        }),
        onSubmit: (values) => {
            console.log(values);
        }
    })

    return (
        <form onSubmit={formik.handleSubmit}>
            <div className='input-container'>
                <input 
                    id="firstName"
                    name="firstName"
                    type="text"
                    placeholder="First Name"
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.firstName}
                />
                {formik.touched.firstName && formik.errors.firstName ? <p>{formik.errors.firstName}</p> : null}
            </div>
            <div className='input-container'>
                <input 
                    id="lastName"
                    name="lastName"
                    type="text"
                    placeholder="Last Name"
                    onChange={formik.handleChange}
                    onBlur={formik.handleBlur}
                    value={formik.values.lastName}
                />
                {formik.touched.lastName && formik.errors.lastName ? <p>{formik.errors.lastName}</p> : null}
            </div>
            <button type='submit'>Submit</button>
        </form>
    )
}

Yup!

Need some form validation, that happens to also double as error handling? If your answer was Yup!, look no further, like mentioned above Yup is a library that handles our form validations and error handling. First, we'll create an object schema with Yup's 'object' function. Then, pass in our input fields and tack on the expected data type, which in this case is a string. The '.required' method is a parameter we can set, as well as the error message we want displayed whenever that field is left blank. Pretty handy right! Lastly, we implement a ternary operation to show if a user doesn't click within the form, do not show error messages or require that they follow the constraints we set. Yup and Formik's api has many useful functions that do most of the work for us, such as onBlur. This activates the form validation and error handling, so a user submits valid data.

Conclusion.

As developers, Formik paired with Yup, save us time and allow us to easily validate forms in react. Not saying we couldn't without these libraries, but doing so with dry, scalable code in half the time is a win-win!

Resources

Here's some resources to further research these libraries.

Formik
Yup

Cracking the code: Intro guide to data structures.

Malissa Bishop — Wed, 22 Dec 2021 22:07:33 +0000

Intro.

Why do we need data structures? Well without data structures, we cannot solve algorithms. In that case, if we were only coding for joy, we wouldn't necessarily need algorithms either. But for those who need to see the green, including myself, algorithms are a powerful necessity to prosper in coding interviews. Also, you'll run into data structures more often than not during your programming journey. Data structures have a particular way of organizing data on your computer to be used effectively. If your goal is to build better computer programs, understanding the concept of data structures will definitely help coding abilities become more efficient. At first glance, learning data structures from books, tutorials, etc can be really intimidating, solely based on the heavy presence of math and numbers. If you understand the the reasoning, they become less complicated.

Need To Know Data Structures!

So lets think of a way to break this down and get a better understanding! Imagine you were going to bake a cake, and the only ingredient you had was flour. Well you would't be able to bake that cake, unless you had all the rest of your ingredients, like sugar, vanilla extract, eggs, etc. Now if we combine all the necessary ingredients, we're in business and we can get baking! The same analogy works with data structures, it renders useless with a single data item, but when grouped together then we can consider those data items as useful compound data. As a result, that data gets stored in a particular data structure, and choosing the right one is important. There isn't a data structure that would be considered best to use, each one has its pros and cons. The way we can get a better understanding of choosing a data structure to manipulate our data is to see how it adds, retrieves, sorts, or searches those items.

.add()
.get()
.sort()
.search()

This is known as The Big O Notation. It describes how fast a function is growing. So, if we had a group of data items, and we added a significant amount more to our existing function, then it calculates how much longer each operation would take.

Data Structures.

Linked Lists

A linked list is a linear data structure that consists of nodes. A node consists of a value, which can simply be a number, and a reference link that points to the next node in that list. Hence, it being a linear structure that keeps going on and on. The start of a linked list is known as the head, where as the last node, is known as the tail or null.

Pros.

It's good at adding nodes
It's also does well at deleting nodes because we can simply change where our pointer points to.

Cons.

It doesn't do so well at retrieving or searching nodes because it is only aware of the node that is next to it.

Arrays

Arrays have a familiarity across almost all programming languages, so you should probably be familiar with them. An array is a collection of data items stored in adjacent memory locations. Arrays keep memory of all the locations of the data items.

Pros.

It's good at retrieving and searching because items are stored in specific memory locations. Which makes them easy to retrieve.

Cons.

Adding items can sometimes cause issues; as your array grows in size, it can crash into other items stored in memory.

Hash Table

A hash table stores a collection of keys and values. It's an important type of data structure, because after you give a hash table a key, it's able to return its value. Even though it's similar to an array, what makes hash tables special is once you provide a hashing function, it automatically retrieves the data and it does not have to be stored next to one another like an array.

Pros.

It's good at adding, retrieving, and removing because items don't crash based on memory location, like arrays.

Cons.

Sometimes two keys can hash to the same value, which is known as collision. This can be fixed with collision resistant hash functions, such as cryptography. Cryptography uses an algorithm to transform values, so they don't return mimicked values.

Stack & Queue

Stack and queues are very similar to each other, and they are built from the same structure as arrays. With stack, the last item you put in is the first item to go out. Two methods used are .push() and .pop() to carry out this behavior. On the other-hand, queue operates as first item in, is the first item to go out. Adding an item to the end is known as .enqueue() and removing an item from the front is .dequeue()

Pros.

Efficient in adding and removing.

Cons.

Depending on use, usage could be limited, depending on your application.

These are some important data structures to keep in mind, next I'd like to cover graph and trees in its own right, since there's a ton of information to go over. Till next time coders... Below are some resources to study algorithms in preparation for your coding interviews!

Resources

No such thing as "can't"...

Malissa Bishop — Wed, 08 Dec 2021 18:41:16 +0000

Stay Motivated.

Being a programmer isn't easy, if everything were easy we'd never know when we achieved what we're striving for! Similar to hours of debugging code, feeling that imposter syndrome...wondering if this is for you. Think about when you achieve it, and how it gives you the motivation to keep going.

The Start.

Think about when you first started. For example, some simple html and css tutorials. Easy right? After completing numerous tutorials, I was at the stage where I felt I was making progress. Until I ran into challenges, where the tutorials I feel I mastered didn't help me. Suddenly, I thought I wasn't ready or I didn't know as much as I thought. You can start to question your motivation and confidence. It's perfectly normal to feel like this; an onset of discouragement can start to cloud your focus.

The Come Up.

Things in life aren't easy, think about where you are and how you got here. With motivation, persistence, and determination to name a few. It's all about pushing through! Don't lose your motivation because you feel you haven't yet grasped a concept, and someone else has or made it easy to do so.

I'm big on purpose, so if you've read my other blogs ask yourself WHY?

Why did you start programming in the first place, why do you want to learn and succeed...? Many people drop programming because they lose sight of their original motivators. This can be due to not making progress during their learning journey or just being overwhelmed. To pivot away from this, constantly remind yourself of WHY!

My second piece of advice in anything I do, and especially in programming is to break it down. Why tackle a problem all at once, when you can literally take it piece by piece. Being overwhelmed comes from being overloaded with too much at once. Our minds are powerful and you only feel what you believe, so be confident and manifest determination. Create an environment in your mind where you can intake information on a clear receptive mind.

Stay up.

Programmers with 20+ years of experience, still run into the same issues junior developers do. Remember, don't correlate yourself to others, understand and remind yourself why you're doing this, and break down problems. Take breaks, exercise, eat well, and don't forget there's no such thing as can't, because you can!

Cracking the code: Material UI

Malissa Bishop — Mon, 22 Nov 2021 06:35:23 +0000

WHY?

Here I am, back again to lay out the simplicities of programming. If you can find yourself to combine simple and programming in the same sentence... My first experience with Material UI, wasn't the best nor the easiest. It felt as if I was learning another language, but again like my last post...WHY? would we want to learn and implement Material UI into our projects?

THE PRELUDE!

I prefer to express concepts in a simplistic form. More often than not, learning and applying new languages can be difficult with some of the documentation we find online. I'd like to change that; With understanding the purpose and the problem a language or framework library is solving. I mean I don't mind almost going bananas, to simplify learning for new web devs on their journey. So...

WHAT IS MATERIAL UI?

Material UI is a component library made for react to streamline a faster, easier web development and user experience. Basically, Material UI allows us to style our react applications with prebuilt buttons, navigation bars, grid systems, etc. Everything from their library is styled following their very own specifications. It even integrates best coding practices, so that users and developers can easily understand and navigate your project. If you're familiar with Bootstrap, it's quite similar, but designed by Google and quite fancier if you ask me! No shade to Bootstrap though.

IMPLEMENTING MATERIAL UI.

FIRST THINGS FIRST...

To get started, and view changes to the styling of our webpage, we have to install a few things.

// in your terminal, run
npm install

// then to view our website in the browser, run
npm start

In order to use Material UI within our code editor, we must install all the dependencies necessary to implement styling. Otherwise, it wouldn't alter the design of our webpage.

// with npm
npm install @mui/material @emotion/react @emoticon/styled

// with yarn
yarn add @mui/material @emotion/react @emoticon/styled

We're now able to style our components, and import from Material UI.

import { makeStyles } from '@material-ui/core'

const useStyles = makeStyles ({
   page: {
     margin: '10px',
     display: 'flex',
     paddingLeft: 200,
     paddingTop: 70
   }
});

function AlbumCards ({ props }) {
     const one, two = props

     const classes = useStyles()
return (
   <div className={classes.page}>
   <Box>
   <Grid item xs={12}>
   <Card variant='elevation'>
    <CardHeader
      title={one}
      subheader={two}
    />

In the above example, we declare a variable and set it equal to makeStyles. We also have to declare another variable inside our function to call makeStyles. In React, always use camel casing to apply styling, such as 'paddingLeft'.

Now we're set to apply our newly created styling components as a className or call the component in our return. So enough of my post, start creating and happy programming!

Cracking the code: React for beginners.

Malissa Bishop — Tue, 09 Nov 2021 08:07:31 +0000

WHY?

The probability of understanding a program, such as React, can be slim if we don't understand the problem it's solving. This is where the WHY? comes in...
Throughout my learning journey, I often find myself asking the question WHY? I prefer to envision things in real world applications, like Why would we use this? How could we apply this knowledge? Our world revolves around technology, and we utilize the web for a variety of applications. Behind the scenes, programs like React are utilized to represent what is seen on webpages. React allows us to manipulate a user interface with ease, and creates cohesive code.

Answering the WHY?

Answering the WHY? will help you excel in any language you set out to learn, taking this approach has improved how I digest learning new concepts. So let's apply answering "the Why?" with React.

React helps us enhance efficiency and flexibility of the webpages we build. It allows us to divide portions of the page into pieces called components.

In the example above, we start out with a main component, "App". With React, the App component holds our child components, and allows us to seamlessly funnel data back and forth from parent components to child components, this is called props. I'll dive more into detail on my next post, so let's just grasp the basics. Components are reusable and after being defined you can call them as much as you'd like, this is key when building out larger applications.

Conclusion

In order to fully grasp the concept of learning a new language, understand the WHY?, and the problem it's solving. Once executed, you'll feel compelled to take advantage of a program like React in your next project. Now that we understand the basic concept of React, stay tuned as we dive deeper into its functionality...