DEV Community: Harpreet Singh

Easy Forms with Formik and Yup

Harpreet Singh — Sat, 07 Oct 2023 09:14:29 +0000

Form handling is a fundamental aspect of web development, allowing users to interact with applications by providing input. Managing form state, validation, and submission in React can be complex, but with the help of libraries like Formik and Yup, this process becomes streamlined and efficient. In this blog post, we'll explore how Formik simplifies form management in React applications, and how Yup complements it by providing robust schema validation making our lives easier.

Features

Simple and Intuitive API
Formik's API is clean and intuitive, making it easy to manage forms in React applications. It encapsulates the form's state and provides methods to handle form submission, validation, and more.
Built-in Validation
Formik includes built-in support for form validation. It allows you to define validation rules for each field, providing immediate feedback to users on invalid inputs.
Form State Management
Formik takes care of managing the form state, including values, touched fields, and form submission status. This eliminates the need for manual state management, reducing boilerplate code.
Error Handling
Formik provides an elegant way to manage and display form errors. It keeps track of the validation status of each field and makes it easy to display error messages.

Installation

Let's begin with installing Formik and Yup

npm install formik yup

Imports

Now we can import Formik and Yup in our react form component

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

Initial Values

Formik requires that we give it initial values to start with. Here's an example:

const initialValues = {
  name: '',
  email: '',
};

Validation Schema

Formik also requires we provide a validation schema. Here is where we use the validation prowess of Yup

const validationSchema = Yup.object({
  name: Yup.string().required('Name is required'),
  email: Yup.string().email('Invalid email address').required('Email is required'),
});

onSubmit

Formik provides a onSubmit by default when you submit your form. You can customize this with any logic you need such as for a POST request to your api. In this example, let's just console log the values

const onSubmit = (values) => {
  console.log(values);

Formik Input Form

Now that we've set the three requirements by Formik {initialValues, validationSchema, onSubmit}, let's create our form to accept input

const App = () => {
  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
    >
      <Form>
        <div>
          <label htmlFor="name">Name:</label>
          <Field type="text" id="name" name="name" />
          <ErrorMessage name="name" component="div" className="error" />
        </div>

        <div>
          <label htmlFor="email">Email:</label>
          <Field type="email" id="email" name="email" />
          <ErrorMessage name="email" component="div" className="error" />
        </div>

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default App;

Notice the tags which make displaying error messages super simple and automated by Formik and Yup based on the validation schema.

Conclusion

Formik and Yup are powerful tools that greatly simplify form management and validation in React applications. By leveraging the intuitive API of Formik and the robust validation capabilities of Yup, developers can create interactive and user-friendly forms with ease. As shown in the examples, Formik and Yup provide the necessary tools to get the job done efficiently and effectively. Start incorporating them into your React projects and experience the benefits firsthand!

Here's more information

Formik Docs

SQLAlchemy Essentials

Harpreet Singh — Sun, 27 Aug 2023 21:44:36 +0000

SQLAlchemy is a popular Python library that allows developers to interact with relational databases seamlessly. PyPI offically describes it as a "Python SQL toolkit and Object Relational Mapper that gives application developers the full power and flexibility of SQL". This blog post introduces you to the basics of SQLAlchemy, including installing the library, defining database tables, creating databases, and establishing relationships between tables.

Installing SQLAlchemy:

Before diving into SQLAlchemy's capabilities, let's start by installing the library. Open your terminal and use the following command to install:

pip install sqlalchemy

Now that you have it installed, let's begin with defining tables.

Defining Tables:

Tables are the building blocks of any relational database. SQLAlchemy simplifies table creation by allowing you to define tables as Python classes. Here's an example:

from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.orm import declarative_base

# Define a declarative base
Base = declarative_base()

# Define a table class
class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True)
    username = Column(String)
    email = Column(String)

In this example, we've defined a User class that maps to a users table. The class attributes (id, username, and email) correspond to the table columns. The id column is set as the primary key.

Creating the Database:

Once you've defined your tables, it's time to create the actual database. This involves establishing a connection and using the create_all() method provided by the Base class:

from sqlalchemy import create_engine

# Create a database engine
engine = create_engine('sqlite:///db_name.db')

# Create the tables
Base.metadata.create_all(engine)

The code above creates an SQLite database named db_name.db and generates the necessary tables based on your class definitions.
Note that the db_name should be whatever you want to name your database. Now you'd likely have more than one table.

Establishing Relationships:

Relational databases often involve relationships between tables. SQLAlchemy makes it easy to define these relationships within your class definitions. For instance, consider a scenario where you have a User table and an associated Post table. Here's how you could define a one-to-many relationship:

from sqlalchemy.orm import relationship

class User(Base):
    __tablename__ = 'users'

    id = Column(Integer, primary_key=True)
    username = Column(String)
    email = Column(String)

    posts = relationship('Post', back_populates='author')

class Post(Base):
    __tablename__ = 'posts'

    id = Column(Integer, primary_key=True)
    title = Column(String)
    content = Column(String)
    author_id = Column(Integer, ForeignKey('users.id'))

    author = relationship('User', back_populates='posts')

In this example, the User class has a one-to-many relationship with the Post class, with the posts attribute representing the relationship. The author attribute in the Post class establishes the reverse relationship. Note that while there are other ways to create the relationship, I prefer back_populates as it goes on both tables and improves readability.

Conclusion:

SQLAlchemy simplifies the process of working with databases in Python. This keeps the focus on python programming without switching back and forth with raw SQL. By installing the library, defining tables, creating databases, and establishing relationships, you can leverage its power to build sophisticated database-driven applications efficiently.

The useEffect hook in React

Harpreet Singh — Mon, 26 Jun 2023 18:46:11 +0000

The useEffect hook is a crucial part of building with React. It allows you to perform side effects in your components, such as fetching data from an API, subscribing to events, or manipulating the DOM. In this blog post, we will explore the useEffect hook in React and understand how it can be used effectively.

Getting Started with useEffect

To use the useEffect hook, you need to first import it from the 'react' package. It takes two parameters: a function that represents the side effect you want to perform and an optional array of dependencies.

Here's an example of using useEffect:

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Perform side effect here
    console.log('Component mounted!');

    // Clean up the side effect
    return () => {
      console.log('Component unmounted!');
    };
  }, []); // Empty dependency array means the effect runs only once

  return (
    <div>
      {/* Component JSX */}
    </div>
  );
}

In this example, the useEffect hook is used within the MyComponent functional component. The effect function is called when the component is mounted. The console.log statement displays 'Component mounted!' in the browser's console to show this is working.

The optional cleanup function returned from the effect is executed when the component is unmounted. In this case, it logs 'Component unmounted!' when the component is removed from the DOM. This is useful for cleaning up any resources or subscriptions established within the effect.

Dependency Array

The second parameter of useEffect is the dependency array. It allows you to specify dependencies that, when changed, trigger the effect to run again. If the dependency array is empty, the effect runs only once.

Let's see an example with a dependency:

import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []); // Empty dependency array means the effect runs only once

  return (
    <div>
      {data ? <p>{data}</p> : <p>Loading...</p>}
    </div>
  );
}

In this example, the effect fetches data from an API using the fetch function. The effect runs only once when the component is mounted, thanks to the empty dependency array. The fetched data is stored in the 'data' state variable using the useState hook.

If you want the effect to run whenever a specific dependency changes, you can include that dependency in the array. For example:

useEffect(() => {
  // Perform effect
}, [dependency]);

By adding 'dependency' to the dependency array, the effect will run whenever the value of 'dependency' changes. The dependency can of course be anything your specific project uses.

When to use useEffect

Fetching data from an API: Use useEffect to make an HTTP request to retrieve data and update the component's state with the fetched data.
Subscribing to events: Use useEffect to subscribe to events, such as scroll or keyboard events, and perform actions based on those events. Don't forget to unsubscribe from the event in the cleanup function.
Manipulating the DOM: Use useEffect to manipulate the DOM directly, such as adding or removing elements, changing styles, or interacting with third-party libraries.
Integration with external libraries: Use useEffect to integrate React components with external libraries that require initialization or cleanup, such as Google Maps or charting libraries.

Conclusion

The useEffect hook is a powerful tool for handling side effects in React functional components. By understanding its usage and incorporating it into your components, you can perform various tasks such as data fetching, event subscriptions, and DOM manipulation. Remember to consider dependencies and cleanup functions to ensure efficient and error-free side effect management in your React applications. Happy coding.

Functions and Their Importance in Code

Harpreet Singh — Sun, 14 May 2023 23:04:09 +0000

As my Flatiron Bootcamp has taught me, "Functions are the single most important unit of code in JavaScript." Functions are one of the most important concepts and useful tools for any programmer to use today. Some however, like me, will find the concepts a bit tricky in the beginning. So what are they? They are the building blocks of any program and are used extensively, especially in web development. While they're used in most programming languages, I'll be exploring them using Javascript.

What are functions?

A function is a block of code that performs a specific task. It is a reusable piece of code that can be called from other parts of the program. This makes the code reusable and clean. Also making it more manageable. We can execute or call functions multiple times.

Functions in JavaScript are structured using the "function" keyword, followed by the function name, and the parameters enclosed in parentheses. The code that is executed when the function is called is enclosed in curly braces. Here's an example:

In this example, the function is named "greet", and it takes a single parameter called "name". When the function is called, it will log a message to the console, using the parameter that was passed to the function.

So are their different types of functions? There are two types of functions in JavaScript: named functions and anonymous functions.

Named functions are functions that are given a name when they are defined. Here's an example:

In this example, the function is named "sum". It takes two parameters, "a" and "b", and returns the sum of the two numbers.
The previous example was also the same as it has the name greet and passes one parameter.

Anonymous functions are functions that do not have a name. Instead, they are assigned to a variable directly. Here's an example:

In this example, the function is assigned to a variable called "multiply". It takes two parameters, "a" and "b", and returns the product of the two numbers. To better understand this, you ca relate it to multiply being the name of a function taking a and b as the parameters.

Best Practices for Functions in JavaScript

Here are some things to look out for with functions.

Always declare functions before using them - named functions in JavaScript are hoisted, which means that they are moved to the top of the code. However, anonymous functions are not hoisted which means they must be declared first, then call/used.

Use meaningful function names - Giving functions descriptive names can make your code more readable and easier to understand.

Use parameters effectively - Functions can take zero or more parameters. Use parameters effectively to make your code more flexible and reusable.

Use return statements - Functions can return values using the "return" keyword. Use return statements to pass values back to the calling code. This is important as sometimes the function runs perfectly but doesn't return the result as it's missing the return keyword.

Here is another way to write a function. Arrow functions are a shorthand way of defining functions in JavaScript. They can make your code more concise and readable. Usually even in one single line if the body is short.

Here's an example of an arrow function:

In this example, the function is defined using an arrow function. It takes a single parameter called "name" and logs a message to the console. Again it can be said that the greet represents the name of the function and it's accepting one parameter.

In Conclusion

Functions are an important concept to learn and master in any programming language, especially in my case with JavaScript. They help to modularize code and make it more manageable. They're reusable and easy to read when written well. By following best practices when working with functions in JavaScript, you can write better, effienct, and easy to read code.