Implementing Forms in React Flashcards
What is the main purpose of forms?
Collect input from user
What is the main button a form has?
submit button
What is a controlled form?
Is the most common approach: all the state is controlled by react and thus is the single source of truth.
What is a uncontrolled form?
The DOM maintains the state.
What are the 5 events triggered on every user interaction with a form (e.g: type a key)
1 - The form is initialized with the initial state
2 - The form renders the initial state
3 - User input triggers onChange callback with a new value
4 - onChange callback updates the state of the form (setState)
5 - Component re-renders (due to step 4 setState).
What are the 3 advantages of controlled forms?
Instant feedback, disable portions of the ui conditionally, format user input
When to add form validation so the whole form is validated when the user clicks on submit?
in the onSubmit event of the form element
What are two disadvantages of vanilla React form?
verbose and error prone
What is Formik?
A library that allow creating forms. Fixes the verboseness and error-proneness of Vanilla React and provides other important features.
What are the main features of Formik?
Automatically keeps track of values, errors and visited fields. Allow easy validations.
What are the four components of Formik?
Formik, Form, Field and ErrorMessage
What are the three state variables that Formik provides?
map of Field and input field value. Map of Field and errors. Map of Field and boolean to indicate if the field was ever touched.
What is the most important attribute of the Field element? Why?
the ‘name’ attribute. Because that’s how formik and the developer know how to access data related to that input.
