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

We'll create a reusable input field component. For the input field, we're interested in the label, the field itself, and the error message for errors. 

We'll create a `components/InputField/index.js` file to write the code for our `InputField` component.

* {
  font-family: Helvetica, Cambria, Droid Sans, Helvetica Neue, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: 0.6s;
}

body {
  background: #f6f8fa;
}


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


import Register from "./pages/register";

const App = () => {
  return (
    <div>
      <Register />
    </div>
  );
}

export default App;


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

We make the `InputField` component accept a number of props including `name` and `label`.

In the `InputField` component, we render the label, the field, and the error message. The value of the label is obtained from the props. Then we pass the `name` prop to the `Field` component. We also pass the remaining props from `InputField` to the `Field` component. This will allow us to pass props like `type`, `placeholder`, and so on.

Then we use the `ErrorMessage` component to display error messages for the field. We make this component render the `CustomError` component. With this, we are able to style the error message text.

Next, we update the `FormikControl` component, and for the `input` case, we return the `InputField` component and pass the rest of the props from the `FormikControl` component.

Finally, in the code for the registration page, `pages/register/index.js`, we add an `email` field to the `initialValues` and the `validationSchema`. Then, we update the first `FormikControl` component with the necessary props.

When we run our app, we can see the label and the input field. If we click the "Submit" button without entering a valid email address in the field, we can see the error message in red just under the field.

In this example, we used the `Field` component for our field, and we only needed to pass the `name` prop to it. The `Field` component returns an input field and passes `onChange`, `onBlur`, and `value` to the field. It also gives us access to other helper functions. But what if we don't want to use the `Field` component? Formik makes it possible for us to use anything for our field and provide access to the helper methods using the `useField` hook.

Learn how to create a reusable input field component with React and Formik.

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

The Input Field Component