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

Which of these methods do we pass to the `onSubmit` prop to submit the form below?
```
const formik = useFormik({
   // ...
});
```


<p>Which of these methods do we pass to the <code>onSubmit</code> prop to submit the form below?</p>
<pre><code>const formik = useFormik({
   // ...
});
</code></pre>


The `handleSubmit` method is not a valid method in the `formik` object.

The `onSubmit` property is not a valid property of the `form` tag.

The button does not have a `type` attribute specified.

```
return (
  <form onSubmit={formik.handleSubmit}>
    // form fields

    // submit button
    <button>Submit form</button>
  </form>
)
```

The code above is the `return` statement of a React component in which `formik` was initialized to a call to the `useFormik` hook. If you click on the "Submit form" button, you'll get a warning in the console. Why will the warning come up?

<pre><code>return (
  &lt;form onSubmit={formik.handleSubmit}&gt;
    // form fields

    // submit button
    &lt;button&gt;Submit form&lt;/button&gt;
  &lt;/form&gt;
)
</code></pre>
<p>The code above is the <code>return</code> statement of a React component in which <code>formik</code> was initialized to a call to the <code>useFormik</code> hook. If you click on the “Submit form” button, you’ll get a warning in the console. Why will the warning come up?</p>


Pre-submission, validation, and submission

Pre-validation, post-validation, and submission

What are the stages of form submission with Formik?

<p>What are the stages of form submission with Formik?</p>


The number of times we want the user to submit the form.

The number of submit buttons in the form.

The number of times the user submitted the form.

The number of form fields before the "Submit" button.

What does the `formik.submitCount` property specify?

<p>What does the <code>formik.submitCount</code> property specify?</p>


`formik.handleSubmit` is used in the `form` tag, while `formik.submitForm` is used elsewhere.

`formik.handleSubmit` is a method, while `formik.submitForm` is not a method.

`formik.handleSubmit` can be called anywhere, while `formik.submitForm` can only be called outside the component.

When passed to the `onSubmit` event of a form, `formik.handleSubmit` first executes `event.preventDefault()` to stop the default form submission behaviour, while `formik.submitForm` does not.

What is the difference between `formik.handleSubmit` and `formik.submitForm`?

<p>What is the difference between <code>formik.handleSubmit</code> and <code>formik.submitForm</code>?</p>


```jsx
<button disabled={!formik.isValid || formik.isSubmitting}
> Submit </button>
```

```jsx
<button disabled={formik.isNotValid && formik.isSubmitting}
> Submit </button>
```

```jsx
<button disabled={formik.isSubmitting}
> Submit </button>
```

```jsx
<button disabled={formik.dirty && formik.isSubmitting}
> Submit </button>
```

Which option is the correct way to disable our "Submit" button only when the submission process is on but not when the form is invalid?

<p>Which option is the correct way to disable our “Submit” button only when the submission process is on but not when the form is invalid?</p>


Test your understanding of form submission with Formik by completing this quiz.

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

Quiz: Test on Submitting Forms