React FieldArray Form Tutorial: Using Formik, Yup and material-ui

In this tutorial, we'll build a donations platform using the Formik FieldArray form with React and Yup for validation.

In order to validate our forms, we will use Yup with Formik validationSchema.
We show how to validate fields inside a FieldArray. We will also do a validation where we have to sum all the fields of an array.

In order to add a nice look and feel to our form, we will use Material-UI

We will use Formik with typescript.

----
React.js Tutorial Playlist: https://www.youtube.com/playlist?list=PLYSZyzpwBEWSe71-aLlq71B2LPZzTNO8a
----
Formik Tutorial Playlist: https://www.youtube.com/playlist?list=PLYSZyzpwBEWT2UfNVx8UqEoOA9DzTNavc
----
Formik Theme Customization Video: https://youtu.be/bDkB3LoQKxs
----
Github Repository: https://github.com/bmvantunes/youtube-2021-jan-field-array-formik
----
Formik Tutorial Video: https://youtu.be/kYyaJyTLjpk
----
Deployed Application to Vercel: https://youtube-2021-jan-field-array-formik.vercel.app/
----

Timeline:
00:00 Introduction to FieldArray + Show the final application we will get at the end of the video
02:17 Creating the form with all the fields, except FieldArray fields
11:53 Style the form using Material-UI
13:23 Add validation using Yup validationSchema - No validation for FieldArray fields yet
20:09 Explaining how the FieldArray works
23:15 Add FieldArray Formik component into our form
32:07 Style the field array using Material-UI
35:55 Add basic validation to FieldArray using Yup validationSchema
40:16 Add complex validation for the 100% percentage sum ValidationError using Yup validationSchema
46:50 Add ValidationError for custom error messages
49:50 Make all buttons disabled during submit
53:05 Conclusion

----
Follow me on:
Twitter: https://twitter.com/bmvantunes
Dev.to: https://dev.to/bmvantunes
Website: https://brunoantunes.net
Github: https://github.com/bmvantunes
LinkedIn: https://www.linkedin.com/in/bmvantunes