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

When we want our users to select just one option from multiple options, we use the `RadioGroup` component. But when we want them to select more than one element, then we use the checkbox component. 

# Using the `CheckboxGroup` component
The process of creating a checkbox component is almost the same as when creating a `RadioGroup` component. The difference is that with a `CheckboxGroup` component, we have to make a provision for the user to select multiple options. To do this, in the `initialValues`, we'll use an array instead of a string.

We'll write the code for the `CheckboxGroup` component in the `components/CheckboxGroup/index.js file`. 

* {
  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

Let's first take a look at the `pages/register/index.js` file before we look into the `CheckboxGroup` component and how it differs from the `RadioGroup` component.

We create the `languageOptions` array, then we add `languages` to the `initialValues`. Take note that we gave it an initial value of an empty array `[]`. This is because we're expecting multiple selections, which we'll append to this array.

Then in the `validationSchema`, from **line 34** to **line 36**, we ensure that `languages` is an array of strings with a minimum of one element. This means our users must select at least one of the available options to proceed.

After that, from **line 67** to **line 72**, we update the `FormikControl` component for `"checkbox"` with the `name`, `label`, and `options`.

Then, we update the `components/FormikControl/index.js` file to make the `FormikControl` component return a `CheckboxGroup` component if the `control` prop is `"checkbox"`.

Going back to the `CheckboxGroup` component in `components/CheckboxGroup/index.js`, the only difference between the `CheckboxGroup` component and the `RadioGroup` component is on **line 18** where we specified a `type` attribute of `"checkbox"` and on **line 23** where the `checked` property is `true` if `field.value` contains the value of the option. This means that the checkbox icon will have a background color if it's one of the selected options.


What if we want just one checkbox with a value of either `true` or `false`, for example, a checkbox to accept terms and conditions? In this case, `value` will not be an array, and we won't need the `options` prop.  Let's create an example. We'll name it `SingleCheckbox`.

Learn how to create a reusable checkbox 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 CheckboxGroup Component

Using the `CheckboxGroup` component

Assessment: Formik Essentials — From Managing State to Submission

Final Assessment

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

The CheckboxGroup Component

Using the CheckboxGroup component

Using the `CheckboxGroup` component