In this post we cover what is Formik touched.
What is Formik touched?
Formik touched is a property that you can use to determine if a value has been changed or "touched" by the user when developing forms in React.
It is a user experience improvement to help the user understand what it is they need to do to correctly submit a form.
For example if in a form there are 3 errors but they have only "touched" or changed one of them and it is producing an error, we can choose to focus on it to guide the user through filling out the form correctly.
1{
2 errors.trees && touched.trees && (
3 <p style={{ color: "red" }}> {errors.trees} </p>
4 )
5}In the above code we can see that if the user has since changed their input, we can detect it and then display an error message for that item.
A use case for this would be if a user has filled out one item in a form incorrectly and has skipped over the other fields.
The form would have many errors most of which being that the inputs are empty.
However one of the inputs has been entered incorrectly which should be addressed first to prevent the user being overloaded with errors to fix.
By using Formik touched we can see which fields have been changed and priorities them first.
In summary, Formik touched is a UX improvement to help you determine what field a user has last interacted with.
Formik
React
React or ReactJs is a library used for developing frontend applications. Its main concepts are based around state, props, and renders.
When a state variable or prop gets updated or changed, they trigger a render.
When a render happens the appropriate parts of the application essentially get re-built using the new values to provide a new UI to the user.
It is worth noting that a prop that causes a render is just a state variable that gets passed into another component.
Further resources
Related topics
How to pass a React component as a prop in TypeScriptHow to use React Router with an optional path parameterHow to use Apollo useQuery with multiple queriesHow to use css variables with ReactHow to use window.addEventListener with react hooksHow to use setState from within useEffectHow to redirect in ReactJSHow to use apollo client without hooks (useQuery, and useMutation)How to use useContext in functional componentsReact.memo vs useMemoHow to make and use a Google autocomplete react hookHow to pass props to children in ReactHow to use dangerouslySetInnerHTML in ReactHow to set the selected option on a select element with React and JSXHow to test custom react hooksReact.Fragment vs divWhat is the difference between useMemo and useCallback?When to use useImperativeHandleWhat are the differences between React.Fragment vs <>What is hydration in React based applications?What are Expo modules in React NativeHow to programmatically navigate using React Router
Save code?
