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

Just like the `CheckboxGroup` component, we may want to select multiple options in our drop-down. To do this, we can simply pass `multiple={true}` to the `Field` component.


<Field name={name} {...restOfProps} as="select" multiple={true}>
  {options.map((option) => (
    <option key={option.value} value={option.value}>
      {option.label}
    </option>
  ))}
</Field>

We then make the initial value for the field an array since we want to accept multiple options. But the default interface for a multiselect field is not quite usable and will need some customization. To do this, we'll use the `react-select` library.

# `MultiSelect` with `react-select`

We'll create the `MultiSelect` component in the `components/MultiSelect/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

In the `onChange` function we passed to the `Select` component from **line 25** to **line 30**, if the `SelectField` changes when a new value is selected, instead of replacing the old value with this new value as we did with the single select field, we update it with the array of values selected.

For the `value` prop from **line 31** to **line 35**, we filter the `options` array to grab only the options with value that can be found in the `field.value` array. The `field.value` array is the array of selected values that we store in Formik's state for the field. On the other hand, in the single select, we only located the option with a value that equals the selected value.

Finally, on **line 36**, we pass an `isMulti` prop to the `Select` component. The `react-select` library uses this prop to know whether to render a multiselect or a single select field. If `isMulti` is `true` or a truthy value, it renders a multiselect field. Otherwise, it renders a single select field.

Learn how to create a reusable multi-select drop-down component with React, Formik, and react-select.

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 MultiSelect Drop-Down Component

`MultiSelect` with `react-select`

Assessment: Formik Essentials — From Managing State to Submission

Final Assessment

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

The MultiSelect Drop-Down Component

MultiSelect with react-select

`MultiSelect` with `react-select`