Gain insights into creating robust React forms with Formik. Delve into managing form states, validation with Yup, and handling submissions to build scalable, efficient forms.

Write React Forms Like A Pro With Formik.png

react.tar.gz

React-with-watcher

React-without-watcher

react-app-template

This course focuses on Formik, a JavaScript library for building forms in React. The ability to handle form data is crucial in modern web development, and Formik simplifies the process by allowing you to create forms with less code. You'll learn how to leverage Formik to create complex and straightforward forms with ease.

You'll start with the basics of Formik and gradually work your way up to more advanced topics. You'll learn how to create form fields, handle validation, manage form states, and submit forms. You'll also learn how to use Formik with other popular libraries like Yup for more advanced validation scenarios. 

By the end of this course, you'll be able to create robust and scalable forms in React using Formik. You'll have a deep understanding of how to manage form states, handle form submissions, and validate user input. Data collection is a key element in information technology and will enable you to build better, more organized forms with less code.

Writing React Forms Like a Pro with Formik

# Submit the form

After our users have completed the form, they will make an attempt to submit the form. For this, we'll create a `handleSubmit` function that will be called whenever the `onSubmit` event of our form is triggered---that is, whenever our users click the "Submit" button.



body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}


import React from 'react';
import ReactDOM from 'react-dom';
import App from './app.js';
import './style.css';

ReactDOM.render(
  <App />, 
  document.getElementById('root')
);


import React from "react";

const App = () => {
  const [values, setValues] = React.useState({
    name: "",
    email: "",
    phone: "",
    password: "",
  });

  const handleChange = (e) => {
    setValues({
      ...values,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("Form submitted")
    console.log("Form values", values);
  };

  return (
    <section className="form-wrapper">
      <h1>Register to get an icecream :)</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Name
          <input
            type="text"
            name="name"
            placeholder="Enter your name"
            value={values.name}
            onChange={handleChange}
          />
        </label>

        <label>
          Email
          <input
            type="email"
            name="email"
            placeholder="Enter your email address"
            value={values.email}
            onChange={handleChange}
          />
        </label>

        <label>
          Phone Number
          <input
            type="phone"
            name="phone"
            placeholder="Enter your phone number"
            value={values.phone}
            onChange={handleChange}
          />
        </label>

        <label>
          Password
          <input
            type="password"
            name="password"
            placeholder="Enter your password"
            value={values.password}
            onChange={handleChange}
          />
        </label>

        <section className="form-data">
          <p>
            Name is <span>{values.name}</span>
          </p>
          <p>
            Email is <span>{values.email}</span>
          </p>
          <p>
            Phone number is <span>{values.phone}</span>
          </p>
          <p>
            Password is <span>{values.password}</span>
          </p>
        </section>

        <button type="submit">Submit</button>
      </form>
    </section>
  );
};

export default App;


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4rem;
}

.form-data {
  background: #f0f3ff;
  border: 1px solid #b3c1ff;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 2rem;
}

.form-data p {
  text-align: left;
  width: 100%;
  margin: 0.5rem 0;
}

.form-data p span {
  font-weight: 700;
  text-decoration: underline;
}

h1 {
  font-size: 2rem;
  color: #325;
}

form {
  width: 100%;
  max-width: 480px;
  border: 1px solid #eee;
  padding: 1.6rem;
  border-radius: 6px;
  margin-top: 2rem;
}

label {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  margin-bottom: 2rem;
  color: #444;
  font-weight: 500;
}

input {
  display: block;
  font-size: 1rem;
  line-height: 15px;
  background: white;
  margin-top: 8px;
  font-weight: 400;
  color: #222;
  padding: 16px;
  padding-right: 16px;
  box-shadow: 0px 1px 2px rgba(50, 50, 71, 0.08),
    0px 0px 1px rgba(50, 50, 71, 0.2);
  border-radius: 6px;
  outline: none;
  border: none;
  transition: 1s ease;
  width: 100%;
}

input:focus {
  box-shadow: 0px 0px 0px 2px rgba(76, 111, 255, 0.3);
  border: 1px solid #7895ff;
}

button {
  width: 100%;
  background: #4c6fff;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  padding: 16px 0;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s linear;
  font-weight: 600;
  font-size: 14px !important;
  line-height: 14px !important;
  color: #ffffff !important;
}

button:hover {
  background: #3453d1;
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

On **line 27**, we listen to the `onSubmit` event of our form, and we call the `handleSubmit` function when the event fires. This means that whenever our form submits, we call the `handleSubmit` function. 

But how does the form know when it has been submitted? If we look further down in our app.js file, we see that our "Submit" button has a `type` of `submit`. This means that whenever the button is clicked, it fires the `onSubmit` event of the form that houses it, and the form gets submitted.

Typically, we're expected to include one button of type `submit` in our forms. However, if we have more than one button of type `submit`, clicking any of the buttons will trigger the `onSubmit` event of our form.

Looking back at our `handleSubmit` function on **line 19**, we use `event.preventDefault()` to stop the form from taking its default action when submitted. The default action a form takes when it is submitted is to refresh the page. We don't want to refresh our page because we want to handle everything on the same page (since it is a single-page app).

After preventing the default action of the form submission, we display an alert box and log our form values to the console on **lines 20** and **21**. 

>**Note:** If you're running your code in the code widget, you may want to check the console of your browser by clicking "CTRL + SHIFT + I" (or "CMD + OPTION + I" on Macs) and then click the "Console" tab.



Learn how to validate and submit a form in React and how to ensure that all the fields in the form have valid inputs before submission.

Getting Started

Managing the Form State

Validating Forms

Submitting Forms

Assessment: Formik Essentials — From Managing State to Submission

Reducing Boilerplate

Creating Reusable Form Components

Additional Concepts

Final Assessment

Project: Build a Multi-Step Checkout Form with React and Formik

Introduction to Form Submission and Validation

Submit the form