micael Copyright ©Softwave Marketing 2024

Form Handling

Forms are a critical part of web applications, allowing users to input and submit data. "Startup" provides tools and libraries to handle form creation and validation effectively.

Form Creation with Formik

Formik is a popular library for handling forms in React applications. It simplifies form creation, validation, and submission. Here's how you can use Formik in your "Startup" project:

  1. Install Formik: Install Formik and Yup for form validation: npm install formik yup

  2. Create a Form Component: Build a form component using Formik's Formik and Field components.

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

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

const MyForm = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    validationSchema={validationSchema}
    onSubmit={(values, { setSubmitting }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        setSubmitting(false);
      }, 400);
    }}
  >
    <Form>
      <div>
        <label htmlFor="name">Name</label>
        <Field type="text" name="name" />
        <ErrorMessage name="name" component="div" />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
      </div>

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

export default MyForm;

Use the Form Component: Include your form component in your application.

// App.js
import React from 'react';
import MyForm from './MyForm';

function App() {
  return (
    <div className="App">
      <h1>Form Handling with Formik</h1>
      <MyForm />
    </div>
  );
}

export default App;

Conclusion

Formik simplifies form handling in "Startup," allowing you to create forms quickly, add validation, and handle form submission with ease. It streamlines the form development process and helps you maintain a clean and organized codebase.