Push to multiple remote repos from a single local repo

Amdadul Haque — Wed, 20 Nov 2024 08:47:52 +0000

Are you working on a front-end project for clients? The client set up a github repository and you need to push the code in that repo. Do you want to see a preview of how it looks on the live site? Here is a solution where you can set up another repo in your personal github account and host it for free in vercel or netlify.

Add remote repo

We know that we use

git remote add origin <url_to_our_github_repo>

here the origin word is kind of a key and name to keep in mind for the github repo we have added.

So we can add another remote repo and then we need to select another name for that remote repo, lets have we choose a name dev so the command will be

git remote add dev <url_to_another_github_repo>

Push

For pushing to remote repo (origin)

git push origin main

dev repo

git push dev main

React Form Validation with Formik and Yup

Amdadul Haque — Sat, 06 May 2023 04:21:26 +0000

Form validation is an important part of any web application. It ensures that users provide valid input before submitting a form. In this blog post, we will learn how to implement form validation using Formik and yup in a React application.

Getting Started

To get started, we need to install the required packages. We will be using formik for managing our form state and yup for validation.

npm install formik yup

Setting up the form

Let's start by creating a simple form with two fields - name and email.

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';

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

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

const App = () => {
  return (
    <div>
      <h1>Form Validation Example</h1>
      <Formik initialValues={initialValues} onSubmit={onSubmit}>
        <Form>
          <div>
            <label htmlFor="name">Name:</label>
            <Field type="text" id="name" name="name" />
            <ErrorMessage name="name" />
          </div>
          <div>
            <label htmlFor="email">Email:</label>
            <Field type="email" id="email" name="email" />
            <ErrorMessage name="email" />
          </div>
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
  );
};

export default App;

In the code above, we have defined a form with two input fields - name and email. We have also defined an onSubmit function that will be called when the form is submitted.

Adding validation

Now, let's add validation to our form using yup. We will start by creating a validation schema for our form.

import * as Yup from 'yup';

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

In the code above, we have defined a validation schema using yup. We have specified that the name field is required and the email field must be a valid email address.
Next, we will update our Formik component to use the validation schema.

<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>

Finally, we will update our form inputs to display validation errors.

<div>
  <label htmlFor="name">Name:</label>
  <Field type="text" id="name" name="name" />
  <ErrorMessage name="name" />
</div>
<div>
  <label htmlFor="email">Email:</label>
  <Field type="email" id="email" name="email" />
  <ErrorMessage name="email" />
</div>

In the code above, we are using the ErrorMessage component from formik to display validation errors for each input field.

Conclusion

In this blog post, we have learned how to implement form validation using Formik and yup in a React application. Formik and yup provide a simple and powerful way to manage form state and validation. With these tools, you can easily create forms that are robust and user-friendly.

DEV Community: Amdadul Haque